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INTENDED AUDIENCE 

Whan chalbngad to dosign the interface lor a website or multiiriBdia project, many 
nesigners reach instinctively lor Iheit favorite paint prog* amor welHtevelQ|imen[ soft¬ 
ware The true measure of a deign s success. though. isihs quality o* the target nucii- 
ence's experience when using thfll pfttfUCt The growing demand for better end prod¬ 
ucts requires today's designers to he equipped to ctevetop products that otter a supen- 
or user experience. Exploring Interface Design offers the solid foundation and practical 
advice that will enable beginning, intermediate, and advanced wub and multimedia 
design stud cm s to acquire end practice these vnal shills. Even professional designers 
will find plenty of useful tips and techniques to help improve the quality d 1 their designs 
and professional practice. 


BACKGROUND OF THIS TEXT 

AllJia^gh general w/Eb design buaks abound todiy H ITlKi iru spsciiliitd to ft pirticylJU 
aspect otthe sub|ecl — su^h 3 $ Critiques &1 vyebsu#s or investigations ot design 

theory. Exploring! Intorfoc# Design is irniqus in chM it [mats all aspects of successful 
ussf t^pefience design n a delightfully rub-Jjabk siylu ypufsii 10 dosignors of all It-veli 
It rhso flpas a stop further by providing clear sxnivpl#s of wftal lo do and what not ro 

do. Exploring IntOrf-ftCO Qosign 11 wiles you to expHH0nc« th« founds LidOS, 1^.11;Iiriitiu. 

d^ci:i<Lm making r and real-world problem solvirtg fronto ihe porspociivc; ot a successlul 
practicing designs? with a gonuint ontti^iasmi and iovo far design. 


TEXTBOOK ORGANIZATION 

Exploring Interface Design is structured like a large Web or multimedia design project. 
After laying (he initial groundwork, the book introduces ttig interface design process. 
The bank then follows that prraass. starting with goal setting task and audience anaiy 
srs. and idea creation, then progressing through the steps required to solve mulfe 
faceted, real-life design challenges Special attention is given to (he impprtiml H:pic:iOl 
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VIM 


vi i.iu do sign -.v! in lei l« i‘ weh in I multimedia, and tfesignmg lor pcca-s-s-ibMitv The !: 0 uk 1 hen CQvors 
ISdWIQ communicate 11 <H= de>i:.|ii. peiFuiJti usability Lashng, ai iJ grow u piupFussiurtiJ piidice 

Chapter Une. tiwttwg the Pawn* at Multimedia and Ota Web, sets the stage by delminj the rote thai 
user experience iles gnars and related professionals play In weti and muld[TOd'a developmpnl It intro¬ 
duce poworliil applications of w*b and mullanfldia technology, oncour&ging designers to use techno* 
ogry's full power to provide experiences that cannot be duplicated m any other medium. 

Chapter Two, The Aft of Designing ffegent Software, lays the Igondalipn by exploring Hie underlying 
principles that guide the designer‘s work. Drawing on the disciplines of design, Catfnmve science, and 
ergonomics, reuMile examples era presented that clearly illustrate (he pruiopJes end concepts 

wared. 

Chapter Throe. The User Into face Design Process shows how the design qF me user experience Ins 
intu (heoverall development of a website or multimedi a software pra|BC(. It presents the case Fgr adher 
mg ie a process to ensure quality and consistency ol design. Several ddfeitin processes <n common 
use today, including agile development methods are axamined in ligM of the r effect on (he user e*pe 
nence design function. 

L'laptei Four,. Goaf Suiting and Needs Assessment, addresses (he need H3 evaluate anti plan fgr (he 
Heeds of the target audence (rir a wel;site or muftimedia software product. I li 5 chapter covers meth¬ 
ods of 1 ‘viiluiii ug HK!<iUiM| .vr 1 sites and software. defining user types and tasks, creating personas la 
■Describe ddferem user types, and argent* ng the functions and features of the ^te or software 

Chapter Five, Creativity moi idea Generation, gives the reader specifi c methods for generating promis¬ 
ing i fleas thai con vastly enhance the ‘.alue - J a dp signer* wgrk Heal-life examples are presented US 
challenges, and (he cre.ttm(y methods jppliod Ld gene rule innoi jLi. i; Juas. These ideas are then eval¬ 
uated tg determine which 5 liiefv to produce (he most successful results. 

Chapter- 5m, Manus end Controls, explores the user interlace elements and controls tfcaf comprise the 
designer's lool kil Each inlOffaca element ind central is described and its filfeoton the user experience 
examined Tire chapter presents clear ekamplSS that illustrate when Mid haw to use and not use each 
element and control. 

Chapter Seven. Cosigner} Usable Navigation, addresses a ! » pnas-es of this important component of 
usable software and website design TTt# chaptei stalls by examining varmsus metaphors used 10 define 
u produces navigation. It covers effective search design, menu design, hyperlink design, breadcrumb 
trails and the propc use of Organisational controls such as tabs 
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Chapter Fight. Sal\/if\Q Design Problems, provides three real life design challenges ol increasing cum- 
p^exiiv. It then takes readers through the process qi designing Heritable solutions to those challenges, 
axe mining the strengths and weaknesses of Bach approach. This baginning to-end mathod r. In arty 
shows r eaders l>ow designers woik at a problem to an we at the best solution. 

Chapter Nine, lAst/af Considerations, nvestigaws bow ilia wtsi.nl organization ol a page or screen con- 
tnhutEK tn nr detracts from iho quality of (be user's espn-rienne Numerous 0 samples are used la show 
how relatively minor changes m arrang ament Can contribute signihcantly wlhe usability of ihe screen 
ck page. Also included m This chapter is an m-depth comparative analysis nt two wedsnos that endeav- 

rj r to after similar capabilities 

Chapter Ten. IV- ting fot Usability, s u mini eoursu in ultetiivh wilting Igr ihe web and multimedia. The 
chapter begins by showing how web wishers require e different method of structuring web writing. It 
shows how me nYSr;ed-pyramid writing style is host suited To web writing and provides iruan-plcs of 
how to reduce words and simplify the message -Smce websites and multimedia softwais are alum used 
for education and training applications,. Inc topic of instructional writing is covered Fully, with emphasis 
on context, voice, pace, and sequence. 

Chapter Il r QesttfntflQ tor Accessibility, ujiplOies Ihis irciusnyry imporlanl In pi-::. The coupler begins 
by iflemilying The rr-nst prevalent Types of d 153ft lines affecting computer users, including simulations of 
many different types at vision impairments The chapter then examines be men 1 sailers, scraon magm 
tiers. and refreshable Braille displays, and presents techniques for designing websites and multimedia 
software that is more accessible to users with special needs 

Chapter 12. Specifying rffe Oesigw, presents practical techniques to help designers communicate their 
ideas u team members, clients, and other stakeholders. A real-life multimedia website example runs 
throughout the nhapter, and the reader can see hew ie specify progressive das in steps via pencil 
sketches, software based wireframes, storyboards, and artist's concept drawing, 

Chapter 13, Ferforming Usability Testing, provides i practical approach lo this iroportarH Step That 
designersfroque-ntiy overlook feeders will Explore ihe -annual* foi such tests, investigate the olcs ef 
the vaiitl 1 is participant in a usability itudy, then learn ta set up a usah Uy ipsiing lah and Conduct due 
el several types of usability studies, The chapter jIsu includes practical tips f(u writing up tins rttsubs 
of the u$ ability test m a recommend aliens report. 

Chapter H, The User Interface Designer in Profess onei Practice, addresses Ihe nee its oi individuals 
who are planning; la slarl a practice or who ere presently in one. The chapter covers client relationships, 
building your bt-smess, creating effective proposals, and protection ydurselt bom unethical client prac 
rices The chapter also includes plenty ol tips and techniques for effectively organising ihe practice 



HOW TO USE 
THIS TEXT 

Tha f nil Diving P^aUires can he Fnnud 
Ihiuuyhoui Ehi^ taaok. 


► Objectives 

lasting Objectives 5-tfld oif Bach 
chaplc, Th ay d u sc ribe-1 he u jitlu 
laneie-s me readers should achieve 
upon undtirBtnndinQ the chapter 



material. 


► r ips 

Tips <ire irM?rspnrs-e-d throughout ttie text 
and provide special hi ms arid pi acetal 
Btormstion to the reader. 







► Sidebars 

Sidebar appear ihmuyh 
iut ifte text, ottering add i ■ 
dan al val ua hla i into i malion 
on specific topics. 
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► Summary of Key Points. 
Review Questions, 
and Exercises 

Kdv Points, Rfltfiew Questions,, and 
Exercisesare locatedat me eml cl 
each chapter and reinforce mala¬ 
rial piosented Id allow readers to 
assess, thtrii undo; si ending of Hie 
chapter 


FEATURES 

The Following li\i provides soma of the salient features of the Text 

* loaches the ka ,■ pTino* user experience design, knowledge that is essential to 
crealinff Successful, u s a hi r? Till Hi me if ia end web products 

* leeches 'best practices' by illustrating and critiquing state-of-We-ail examples ol 
miiilsmedie and website designs. Prides firsthand itnowledge tit tile logic and 
thought processes applied hy successful user expenence designer? 

* Defines end clearly enjoins n siep-by-step methodology for designing implementing, 
and evaluating the user experience. 

* Numerous tips, hints, warn pm*, pad techniques enafede readers to quicklv apply user 

experience design principles 1o real world situations 

* A friendly, conversational writing style engages readers and renders evm complex 
topics easy to understand: end absorb. 

* Po sa s interfac e design cha H eng es a nd possi bie a pp r oa ch es. then ana^j es in e 
advamages and drawbacks ol each approach to determine which js best 

* Cove rs in a single hook the mala na I typic eliy laught in froiti introductory and 
advanced interface design courses 

* Cb|eClives clearly sLate the reaming goals of aaeh ehnpter 

* Summary ol key paints and i a view questions reinforce material presented in the each 
chapter. 

* Creative, engaging exercises allow sludsulLs to (lemonstftile their skills- 
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THE LEARNING PACKAGE 

E. Resource 

This electronic manual was developed to asset irmructOfl in planning and imptomenting thoir instruc¬ 
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vide i framework lor classroom discussion, end additional learning tools. Tina ISBN u 1401937417 
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objectives 


Explain how initirniK‘Hirt nriil weirs i tits can use- the pouter d mle rue burly (a p-oriuude, sell, 
Cradle a sense of community. itACh. end ewFcitain 

Describe lllti ini parlance of researching audience tet|Uir0rnarct5 prior to hetfinmufj ro d^ifln 
a multimedii sohwura proper or websiie 

Describe why il is n ippftant 10 create desalts tin pupar bE»ure beginning coditig 
SvtnnHtrMo stnnn of the casts assocruled with poor iisijr niivi-Fnce design 
HeRpqnrre me difference between being creative end hc-tn-rj a- good designer 



VVn i vij in .1 truly ti0g'cu u go At our lihgerUps cm our desktops. and in cur packets, wa n hmi easy 
access to a universe tf powerful experiences— msay of (hem simp*y itiare For the taking. Miilctmedis 
SU?tWaie and v. a Lillis ha vs the jwwsr Ed enrich and Iranslorm us In [he home, ns car. at schoc 
m gov^r iwnem, m small businesses and corporal]Ofis, ihu euwur oFsuKwirpcan ptnsu-iiJe, comma, 
enrnrtatn and divan, chaBangn and ranch. inFoim, ravisnl. moyn ut to In lighter ih tn.lf*. and compell 
vs to Saks h cl ion 1" it prove ourselves and our surroundings 

Examples of the power cl lfiis medium abound in aruas as diverse as bite human Experience 1 U 0 IL. 
MulUmodin and the Web play on evur iiit reeling rol«t in mpdiciny. inarfeeunij camrnumcalwira. edu¬ 
cation prwj irflinintj. transpOTtpTnn cpmmerre. shipping. snd adlertainment. r^nam-n hut a tew Lei's 
lake a brief look at some wull knttwn, and perhaps not-SO-weB-Mortn, ways VI which mulurpHlia 
scj'twa i e u nd W0 Wi.-l hgve demon Pirated thmi true power and ul=ity 
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THE POWER TO PERSUADE 


When the city of All Jilt a, Georgia, decided in make j hid In win the IWh Summer Olympic 
Games, nwd people didn't give them a serious chance of winning, Considered a Jark-hon* 
candidates they faced stiff competition ffom t among other cities., Aihffis, Greece, the orer* 
whelm ing favorite to win the hid. The Atlanta team was short on lUaot)* needecf to mount a 
serious campaign, hut they nude up for it in ingenuity. They decided lh-.il irxlirn ■!•*£• unulii 
K- the most compdJatg means to diuw Atlanta's preparedness and suitability as a potent Jill 
host city. 

The Georgia institute of Technology, better known as Georgia ‘Iccb.was the proposed site ol 
the Atlanta Olympic village. Georgia Techs Michid Sinclair, other members of the universi¬ 
ty and vuluntecrs designed and pieced together two ambitious. interactive systems. The first 
one used a trackball and ilighl simulalor lethmulo^y to allow International Olympic 
Committee (IOC) officials to virtually fly around tile city and tour the proposed venue sites; 
The second system combined a small, A-D, plastic model of I he Olvmyir Village i 'ampus illu¬ 
minated with computer-generated graphics. Touching one of the buildings or areas in the 
model displayed vignettes showing a day in the life of an Jthlete as it applied to the selected 
building or area. 

A key feature ul the presentations was the ability -1 KXJ officials to interact wilh the presen¬ 
tations. iCiher than simply sitting back and watching passively, the officials could control the 
pace and direct ion of the show. This must have been a welcome change, sinor ii is likely that 
most if not all oi the other |iKSCHljitions effend dffirills a much more idle experience. This 
made the AiLain.i ptrsmiaiion stand out from other dues' present jiions. 

Wlu-ii ills' IOC announced that Atlanta lud beaten lhe udds and won the bid to hosl the 1D96 
summer games, the persuasive power of die interactive multimedia presentations received 
much of the credit. 



FUELING COMMERCIAL ENTERPRISE 


Use thn powor oi interactivity to 
engage your audience. Pen pie 
a\n diewn to experiences where 
they can participate, and studies 
shpw that people retain more 
information when actively enga¬ 
ged than when they watch or lis¬ 
ten passively 


Jliru 1 Jays, it seems as if mryufte has something to m;II I he success 
of the World Wide Web is lately fueled by its ability to give even small, 
Mom-atid-Bop operations a dunce to show their stuff in the seme 
forum corporate Goliaths. \ wdl-ennocived, wdl-cvecuted wehdte 

can reap iiviny 1 i■ ■ l>- iis initial investni'.riL an s.:1l-s of lL- miup.iiivs 
prodtiL'ts in 1 sci vices. OJ particular mtcnai to us here are the mulumc 
di,i and W'd> applications that raise service to a new level, extend our 
ability to make good choices, or iiKrease our buying and selling 
jvower in sJhn-rt. those that use ihe power of the medium to its full 
advantage, 
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IViIijjis you art hand' and ate thinking ah mil jddingj dci.k tu your 
house, hut vou art not sure you arc up to the task, You dr Lie to sour 
nf^hborhood lumber or hardware store, where a salcn assistant 
(UHfti you to a kiosk. With the assistant's help* you design your deck 
Using,in LjUctJctive multi media applkalju-H. You speeily ilh %!iape and 
dimensions intluduip any special features stidi as seating, stairs, or a 
hoi tub Cutout. When you an.* satisfied with your creation, the assis- 
t:jmt clicks the Print billion and. in a lew minutes, hands you 4 com¬ 
plete sel ui design dritVmlgs, lAUtSIrUClion Jelaib. and an jLCurate 
materials list lor your deck. The materials list includes quantities and 
the Slone's own pari numbers and prices. You purchase the materials 
and head home to begin construct ion, ligure I I shows the Cad 
Quest Deck application. 




I TIP | 

Lock lor evays 10 minimize the 
vaiut that your application pro- 
vices to customers Prowl-e an 
experience that cannot he ciupi - 
catad using any other medium. 


Im 

r I't GAD Quest Decfc Frppl^atiDn 
d^*eurieii*rs 10 desjyu 
tSiflir mm duck \n l.lm li^iitHpr of hnrfl 
start T>h soFhu#ri jttQn cca^tt^ 
ohd fwm 9 lia ccmpSaN wh 
riunnti: tf s and putts P* 05 (tfinph$ 
priwidEd Cy Cad ikies*, fc nc 
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f] t rflull 


1 how li.i pm ihrtse lu.kcls onl -.1- >11 % i n|s such a> sport* 11 >mpetitions Or concerts are prut 
ablv tarrtiliar 'with ibis next example, Before you toimnill to purchasing the tickets, you are 
shown .i page ih.n ttntnttt a gftpbk representation of 1 he stadium or concert hall, with its 
*> .itmp ■ cr inn* clearly mrke i mi il . I r>n -i ritm in ■■ ihe actual'. :<■« fnum th.it section. 
After l! i lx k11ig iml the view (join several different vantages, vou wket the section th.ll uMti li - 
cs your budgel ami Uslc and purchase your Lithels. A little liter m ihis buciL We will closely 
examine and compare some examples of this particular application available on the Vv r d> at 
the lime of this book's writing. We will ?«' how the various designers differ in their approach, 
including which designs mull in the best experience and which miss die mark. 


TIP 


Whgnever possible design mul- 
unifidia sulLwarfi p'ugrarnS mid 
webstles that access live date- 
bases of rnlormanon Isuch as 
current product inventories =ind 
prices) These are often the most 
powerful and compelling appli 
cations. 



Look tor ways to anticipate me 
unanswered questions users 
might ba asking, such as, 'What 
IS the stale a" my ordtn right 
•wWT To find out whai questions 
your audience might be asking 
themselves, as* tftaitil 


Tile Wi*1> also offers i mi vomer* thr uppmumity to cu&lmiii/e (be 
products they order to their exact needs. Computer manufacturers, 
* _k h as I 'eEL allow customers IL) COilligme tvsleilb with exaclLy the tea- 
iLEn’s ThfvwAffl, f iislomers who place order 1 ; can watch (fenr system's 
progress ltir« nigh I he various steps of manufacturing and quality lest 
ing. Once the system is shipped, I hr cuslismcr is linked directly |o the 
shipper* Mit i-.-irack the irder'-i progress toward •rr.v.ih Ill's.- rites 
illustrate H i growing trend toward offering unprecedented levels of pei 
snndued service. 

tmii70n.com has hivii -l leader in establishing a sense of community 
aillorij: ib customer*. If you choose, Amaion.coin will tell you ivli.it 
min IiicikI i>i Miiuh member would like li receive for Ini hiithday.lt 
can tell y-m wJui ptiiJuM-* your friends a tv making (if they choose to 
shaTt this information . and it will even notify- you if one of them 
«riios -i review of a particular product. Giving users a sens* of ennv 
munity and shared purpose Lratislatcv iiitomore purchases. Figure Id 
shews Aniiiiim.crjiii - I fiends and Favorites, uplioja, which help eus- 
■o users fed like they are part of a community, 


SIMULATION AND TRAINING 



Look far oppm tunnies io build a 
sense ol community and shared 
purpose to lli& websites you 
design, Don't try to tores this on 
users, h lit pf Ovid r the m with the 
means To make connections with 
other users. 


Multimedia staifwan- is excellent al simulating all sorts of Ub eXperi- 
ments, surgical procedures. Ihjshim situations, scientific and etonom- 
ic models., flight and weapons syitems, and hundreds of other types of 
systems and processes, 

ttinJeg students w bo don'i have i nr don't warn) access :r> frogs fordid 
seclkm can simulate ihc experience using a virtual frog ai frogiits.com. 
Afflfll ift Figure 1-3. Ily offering feature-* suxli ,i* interactive anatiuiii- 
caJ part Jjfjehiu. site* such u- this add to Lhe educational value or the 
experience. 
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l hemislry ijluilrnis can Conduct potentially C9ipl!rim(nl^ in * virtual laboratory— 

experiencing rLic ups, cJu>Lic ipLlls, IoJ\u Junto, Alhl cxpLuiilin* -r* event* offering learning 
raiher than injuries requiring Inaimnit. Similarly, apprentice electricians car practice ihcir 
wiring skills in .t virliL.dclrctriv.il labnmlory evich-i»ui risking iniurv in themselves nr damage 
to expensive evptipmcnl ■ Eigurv t -4 choir's a generator wiring acl ivies Jrom Del mar's Virtual 
lafianu,n\ at J’JiK'irri ity ruiulLmmlia software. 

Surgeons ui» pcnctice intiXiMe pnwlim> on enmpuicrHed simuJaLuns that lImm.Iv minik 
the look and teel of real orpins and tissue, f Ik- simulation ilsclk nr human operators hidden 
from view, can introduce Lh’iexpected events in ^"patient," testing the surgeon’s ability to 
react quit kly with the proper tEchnit|tff or course at action. The soil ware can report fully Ofl 
the surgeon's perfoT 111 . 1 nce, giting t-pc’L ilk feedback and rccoiiiEiieiuliug additional pr.u lice nr 
course work as necessary. 

1 11 djisttwntis, corpurjle and government JrauiLng centers, in uisLlILL it ions .uiJ at home, the 
Vftb can provide accessible computerised models, simulations, animations, and interactive 
lessons that help people, young and old. to master diverse subjects ! he Web is a comm uni tv 
where teachers can sham (he isUmc rhal wmk best in Hit- Jnssnimn .md where Mudenh can 
turn for help when they need il. Students with social needs don't have to be lefi behind, u 
more is known about how to make multimedia and Web applications available to a greater 
percentage of the population. 

ItipJ 

Use the modeling capabilities 
of software to simulate dan¬ 
gerous, fragile, onpijositfs, 
rare, nitric BIO, or unavailable 
machines, systems, organ¬ 
isms. and processes. 

1-4 

This rr-iitl'Fiedia iraifMRg scrtviara 
&&DW5 spprtu1i£ it stE-ctnc-ans la 
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rpn-n^rfflBrs-sWliEwC Puj r tauiing 
injii^v f n th^rrtsH^fit ui iTu^jijb Iti 
kP^PB-n^ivE flqu'pmsn!.SD>lwjrii 
cnpyfiginl DE-lmarlBimm^ and 
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Derek Richard a. 
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STRIVE FOR APPLICATION POWER 


Designer* of websites and mLitEiniedia should, oonttiiucush strive to do what the applications 
we\ir described do so wd3—use the power of ihe medium to full advantage. It is disappoint’ 
ICHtt a website or CD-ROM application llul simply repurposes iiifoniliMiull original 
ly iiuMUL l■ • i i JitlL'ient medium, usually paper 'J litre i* nothing wrong with paper—ti 
achieves its purpose extremely well. Imt Mifiwaieii about inters ion. engagement, and expe¬ 
riences. 

Ensuring that thu magical medium fiilfitls its I i mil less pnmtK hills to ihnec who craft the oijie- 
ricnecs that give the medium iLs<W(Wnic power—the ones who dtt ide wllii.ll cumbiii.Utoji and 
lapoul of buttons, menus, text fields, images, ami other dements will best eurtnect us with the 
experience* We choose, In the right hands, the interlace is crafted so ski Utility that it seems to dis¬ 
appear, allowing the pnwrr of 1 1 be application to emeige fiilly realimJ, In less capable hands, the 
user interlace is j b'urdensomi- nlwlado, Standing between user and intention. 



TERMINOLOGY 


Before we proceed ton far, we need to dciine the phnse owr interface, which is often short - 
n l-iI in interface, or i, suit tinu .. Jl.d human computer interaction (I TCI) nr computer- 
human ill ter acl km fOtli For tntr purposes, these terms iu.n be defined j* the means by 
wliith humans interact with a computer lo fulfill a purpose, 1 'lie term user experience is 
sometimes used tmerchanpeaMy with user interface. This term recognizes that users have 
experiences I hi I hiive IxTli circhc it rated bv the designer 1 .. This term is .ilsu used to describe I lie 
entire reLil umdup that .i wdisite UHT ha* with a ..pa it) * pruducLs .llld tervkea, 

A note of warning; the choice of the word h.. ■ has been 11 kicked over diu vears- it is .i ..old, 
impersonal term with negative connotations lor something so positive and people oriented. 
With no reasonable substitute and with ajsologjes lo those who obiea to it. we will make 
mi memos references to users and the mot mterfate in this text. 

Throughout most uf early com puling history* tlw programmers or software engineers wlm 
wrote program code were alsu responsible fur crcaling the User interlace. Since the engineers 
were often the users programs they wrote, they tended ui create Inieiftoes that made 
cense to them. Often the interface would simply mirror the data that the system was storing 
inter 11 . 1 1b\ 'Jhe screen pictured in Figure 1 flchow* ■ typical user interface from that lime. 

The programmers were I lie ultimate power Users; they could tolerate ,ind even preferred) 
diur tent* and cry ptic key ce^ueitces that, though hidden, ijcukklv performed system fund ion*. 
The user interface was an after! hough l— viewed as insignificant complied to the soli ware's 
ftiiteiitmaliiy. 


ft 


ft luring i pewHf "I mu tnnn -s m wilt 



tarty’ software juswiaiee Uj-gy$iHl mare *jn 
hunclKiP Eti«jn ur tv. tUu .i-i-i=« iwarr-aee 
1*04 little FTtQrB t!l HPi ■ ruf*t£|l!>fl <ii hw ihB 
lifayii flfii i dftlA mbs iFHannlly strwiid 


lOQmmm 
Sowf&flnc j---.- 

UBl^n* i MMYlii, 
IW^S-PFWilffinfl 


d* -i r,n 3 ng r E -1 * 1 n \ *= rC-1 * -7 3 p*1-=i 


i; T! ■ WtW° -a' a*" i jti .n* I: 

S _ j a . S!tco:idj 
ep-w tJ. BQ-I 9 #c^ndv 


hi - s i - Adi pi *_ 4 'c z - I !1-J *_. .. .pin L - J - 


| . util ul. il l". _*L Jyl L-- 
“ ? :rn=Aaai- ■*'“■"'■■ 

NrtBr -IT ■ r 1 * ” c;d#. 

out 

OJJi 

n>u 

U-rbJ 

WH 

UtF 3 

qth 

0:JJ 
0 *H 
UAU 
O^H 

O'-'H 


L sere of these early progr-nms, itislifiafrly awed by lilt promiM 1 *fld novdly nf thi* rww medb 
LLEL], mostly uverluukcd (he fact lhaE Ehoe system* weic extremely diffkull In bam ,md use. 
Programmers m-iLiJfr the rules*. and. users- had I mb dunce bill to follow them, HIh a i'Otllpi’ 
rw authorized the purchase of a n4w system, il was assumed that a brftt pan of the 

Investment would go to teaching users how to be productive wilh Che new software. 


RISING EXPECTATIONS FOR SOFTWARE 

As luhn Naisbilt wrote in his 1982 book. ne^ ledin-ek^A is intro 

ducal intosMiety, there JTiusi be^i counEerbabnemg Inmian response—thai k hii^Ii touch— 
i^r I ho lechrlolngy is rejected." - A* tlu- popidnirily o I personal computers rose sharply during the 
- . . »vJ I '■-I i inci .' I i|. 5.1 1 ■ !■■ I ■ i - u« ■ i|-u 1 'h-j ir 1- n.., 1 ■ ja. , fhis intolerance 

grew fut SeVcnd mum t irM. when tile Company plateJ one of these sleek,costly, new den KM 
1.>Ek Hour desk. il expected ihe iliveilineni in you I'« lx: rewarded w ith increased prcducl ivtly. 
I arly personal compuler users valued software that did not require signifkimt additional 
cspcndirhjires in money and Lime for extensive training. 

Sivnnd. person.1 1 .lunpulcrs were perceived ns-status -ymbofr-is well an productiviIt Imilv 
People hiKf higher c^peLta I unis for llie scd'tw ji l 1 11011111^4111 fJn-rr cninputcr tll 4 H they had Ibr 
sultwjie rujlrliiig Oil iht corporate mainframe, liarh in ihe pL i filial cumputiTi hislory; there 
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were tnoct companies competing for market share among the different types ml tcAwilf^— 
word piOUtMulor tpreadtlwel programs.Thiscompelili^vt lim.iu* li*-lped begin to sp.ir 
improvements in W easily users could bum and use rhise products. 


DESIGNING WITH USERS IN MIND 

We use she term user-centered design 11 C!F>) to describe the process and result of designing 
with I he needs of i he tuo in mind. The proKM ntpnret that the user-interface designer adopt 
ihc mindset |h.|l till- User's experience Is lIk-uhl- lh.il !ti,itleraniusL.l( is Lhjiil mu ul tliL- n. ii. r, 
that software, like oilier products, is created chiefly to serve its audience. The designer's and 
the product's success is ultimately measured by how well it meets the needs of that audience, 

lo develop user-centered designs, designer', must hr willing to si hject thi'm wurk at various 
stages of development tu selected members uf its in tended audience. This input helps focus 
the designer's efforts and highlights potential problems m the design, allowing them to be 
resolved before the product is. released 


The Science of Usability 

The creation of an elegant user interface is equal parti sckTuv .mil art. The science is often 
refer re J to is usability, the Internal m nul Organ i;4tmii for .Standard iAM ion ilSO) defines 
usability is the effectiveness, efficiency,. atid ntkfaditn with which .specified users achieve 
sped tied goals in particular environ men is. I'he ISO fun her defines these terms used in the 
definition of usability. Effectiveness is 1 he accuracy and completeness with which specified 
users can achieve specified goals in particular environments. Efficiency is the resources 
expcmltd in relation to the accuracy and coroph-tsruuhs of go.iU achieved, Satisfaction is the 
comfort and acceptability of the work system to its users and other people affected by Lis use. 

We can try to distill this somewhat dry sei of definitkwi into a simpler onr Usable software 
and wi'hsiu's jn-duty to learn, csisy to use. easy to remember, and they enhance the user's abil¬ 
ity to perform desired Usks. Of course, a beautifully designed interlace is not usually, by itscll, 
sufficient to attract repeat visits to a wrbsilr.. In media program, The quality of the soft¬ 

ware or website's content must he compelling as well. But users often refuse to return lo a site 
that is h.ird to inc. regardless of the <|tr.ilily nl its coni mi. !r b then'Tore nu wonder rli.u the 
demand fur designers who tan \ mate truly usable systems is increasing. 

4 related group of workers, usability engineers, ofu-n work with designers to help lest and 
ensure dwt the ptcHluclii being designed and de vela j<ed arc Usable lo thcii ill Lerlded audit j we. 
They design arid cuiitlua usability studies in the labor field, then analyze the results of these 
studies to identity usability delects. I'he\ bring thfse defects to the attention of the designer 
ut Ji-tign i ■-.! in for i[i:pmvrmfii[ I igurc ] fallows a usability Umly being Conducted <11 mSe 
uf these Lib:,. 
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Hma am (wo w*ws DP i uru Wily Ja b TH* first plmio sN*3 Hi* lasting «r«t The Mtthd |>hoto?H bw 4ill* central 
i with a mi aw d Mw leibme ar*n itir uuorti a one way miri oi PtiMos prtiyiiled by The L<mni f Grrjuo 


L'sjfoihty engineers oftcn h«ix(_■ t-.ai iiltlI advanced degree* in human-computer inleracilon., 
u <.1 t*j | ixv engine? n np,. or various di*dpl inti of psychology', In firmj-fh.it do no! employ foil¬ 
in' engineers, the designer .issunres much of the responsibility for creating usable m stems 


The Art of Design 

Tl is the second pilrt ul the a|iiil1 imi, tile nr? o| design, which implies 4 ini ■ -tl l- n keeps design - 
ei 1 glued ii.i llU'il' Coin pula's long alter others have gone home for the evening. We are not 
speaking ilbdut arc jjt terms oi gruptik art, although this certainly pLays an important role m 
the development ot lhe user inter hue. V\V are speaking of the ability of the designer to- create 
• i visinn of vvhal the user mliTtsin.' ,.m .nul -.bouM hr. 



At (he foeijinninij ::f a website or 
muStiiTKKlia Jawlopmom project, 
■ULvv the minimum system can 
hyufaiioii bis d operating environ- 
me 1 II it that will be used iu run ihe 
finished application Test your 
application on lliesa minimal sys¬ 
tems ear'v and often during the 
development process. 


The designer seeks and receives input from tl variety of interested stake- 
holders, including cKtttl, users, aiid other member* of Lite vleveLupinont 
team. The designer combines that information with hiiur he: own tal¬ 
ent. skill, and experience to create (he most beau tried design possible. \ 
beautiful user interface design is one thai ideally expresses the softwares 
function, s.itis.fiL's the runiirementv of i(s audience and adheres la 
established llm-i interlace and glapllic design principle*. CJf course, it 
must. jJmi be pleasing to die eye and ear, and Li has lo perform well on 
the hardware 4 lid software platform* lor which il is specified,, 

I h .11 l.i.ct point, regard 1 ng the hardware and software platforms, deserves 
special mention, Often, the developers who cre-itc a website 01 mulli- 

II b <.l Li. 1 prune 1 Jci rhe develop men! work on high l-iiJ coni pul er vistems 
conuecLnl hy t.(si Tl lines or cable modems. Wheil tested OH these plat- 
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[turns, ihc prdifrt runs flawlessly. The compelling, dramatic images, video, and audio blend 
seamlessly, clictling high praise from the tinuiagL'rs ami clients who lit shown demonstrations 
itf ihc work tn progress. 

UiiftJrUiJiHikly, no one on the ieam bothered m deKwHcu' what sort. oi systems ilie intended 
audience was using. In fact, many nt these were low-eml low-memory plat forms connected bv 
slow, 2dK dial- tip lines. As a n.-suli. when the software- was mn or the weh*ite accessed, both ihc 
audio and video were delivered in shorl. ebopjvy bursts. Since mast systems lucked the plug- in 
itiai wjs needed to Ji>pL<r ihe j nin l jition, tins part <n ihe screen srmply displayed a red^X.' 1 


Express 1b Software's Function 

We used the term b&tuiifm to describe a well-designed user interface. Some inexperienced 
designers believe that this means calling for the latest, coolest, Photoshop*effect, or requiring 
the newest streaming, video technique. Accomplished designers strive for a mui.li deeper 
expression of beauty—the perfect matching ol form to function. J lie graphical look support 
the soft wife's purpose, hu t never overshadows it. 

Software development <- often compared to architecture, and there are many similarities 
between the two In fact, those who special ire in organizing (he information of .1 website or 
software application are called information archile-Lls, 1 term iIljI h sometimes jIvo uW to 
describe a user interface designer, the disciplines of architecture and user interface design 
shore some of the same methodologies and underlying principle*, l ike a good building, a 
well-designed website or n lull in led i < pwpim a an net ■ oi its users. When a designer of 
either buildings or software captures this elusive quality* visitors arc likely lo return again aild 
again, figure 1-7 shows ihc Krank Lloyd Wright-designed J-dMbiywu.rer residence ui 






Fiank Ltayd WmMtfJ sesid&nc* 

hDuulh;! v Ills to Stninyit to uin fl¬ 

ing unvirahimjri. Similarly. good oyer Mn 
Fhcn distil iflcaitcitak the 1uncl«nai nttJils 
nl Mi-n i“ J hvj-i: wilh fhe ntlfdl ul ilF- -liljr- 
enna and (anvironnitH^i Phniciqi rtufi 
Fftilrngwatar cirarlBsyflf Wn^ler" 
P^nnsyFfjfik.a Conservancy 
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I rinlkxmg tf*s Dftw&r ul mu-lim&dia arcrl wBh | 


I’eunsvlvattij. Notice hew well The structure fili itllo its site P oomplernermrig rather than 
JeLrjc Ling fnujn iUh environment. L he site rtteivtt LlluuMJiild^l vi^ilor^ eudl yvw, 

Ekginmng multi media j.nd Web devdupen, when fated wit]] a Hjfiwanr doigu tI i-iIIvh ^; 3 
. s 1 l'.Ll h |or ijicU favorite Wd: UevelopmeEiE luol* or professional [map -_l_ !: 1 j>: suELivajc. 
Keeping with I he architecture amlogyplhu k rikin in an architect calling in ihe bulldozers *ilier 
the Hr si client meeting. Although it is possible to build a house or .1 website in this- fashion, ii 

will he fNlirfclill Itlj L %|H“IISIVC.- lo sUp 

A In-tier kk h d is Lo eapreas ymir ideas on pjfHT. An arJiiteii creates a set of blueprint* lhal 
specify and guide The amslrucLion ul the building. Likewise, Lhc user interface de*ignrei crc- 
j l es a set ul spedli^mims*often in the form of wireframes or other prototype,before any cod¬ 
ing hey ins. Wireframes, as they relate tn umt interlace design* usually aic M.-hem,itic ^kctchc^ 
of the important screens in the software or website. The images contain crude representations 
of the various user interface elemesils that appear on each screen. txphnumrv texl acconipj- 
JSies the image*. describing the screens-and indicating what happen* when a partial Jar control 
is activated. Figure l-E shows a sample wireframe Epical of those created h y the author A 
proton-pets 1 moregeiwral term that describes u partial implementation of a software system 
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a seNmatic drawing be the lop^ 
n 1 a Mutual dBEc^ ipiiofi below 
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or website, Thi 1 |iTnsitiiy|v can he on paper or delivered dtdnmkjlly. It sometime* includes 
-n.ln.il Iljiil :mi. il ny i.i i deilluiiiirJtC 3iov j |Mi linj]ii feature: -vtil upcrali. We will diMUS-t 11 . 

s^iliLjiKu of die user interface design, using tools such as wireframes, in Chapter 12 . 

When the designer must make dunp to the design,, fhc changes can be made much more 
cheaply to the paper version of the deM.su than m the Finished code. By mrnr-ni, the designer 
who begins coding immediately inmts a lot of time and effort into the creation of that code. 
Mich 4i designer will he ]c>> willing to m.Lkc Llk r kind- i#t changes LluL j client h.i- the right to 
ttpect.whk.li —in lead lo frustration tar the developer and the potent! ,d loss oI the project and 
line client, 

The client also bears some responsibility in this process. The client's approval of the wire' 
Ir.imes means that WsdcCAO continue to the next pi use ol dtvdojHMt. A client whasubhc 
qtKUtly reboots sjjsnilicaiit duitps to the uw.-r inter face design. jfter Approving llie wire- 
traoles mi; incur additional costs fur the changes. 


Satisfy the Audience's Requirements 

The most important— and mod often ignored—step m the development of a successful wti- 
site or mullimedu project is to thoroughly LindiTsi.tiid its illteiltied audience. The |Wivplc who 
i Li j i yum website ui use vour multi media sn/twapt may noi think ur act AiiythiJtg like you do. 
They may be older nr younger, of a different gender or culture, hl.lv be hesitant to tech¬ 
nology, or may he in a great hurry- In their minds, they have their own modd of how your site 
or software is set up. This in ay or may not coincide with sour model. Figure I -9 fihnws hnir 
widd; different computer umcis. 





Ill, Ijll 
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Vl'sk-L J yd Tdlti^U'U Slfllwtii: 
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View, Bfld rpqui^nviiH Hill i r 
mnaiiBce dfisi^niar must l^n-rn ihnUI 
Hit aurtipn-riiK and dafijgri Eu 
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Watching ii live user operate J software program ur website Int (he firj;l lime can hr 1 siirpi is 
I liquid humbling experience I or the designer. Assumption* the JfMgitc; made regarding huvv 
functionsshould be organized, or what hk'k to qr (or choker may ink stand up lo the one 
lest that really matters—the audience's ability to Lise ihe software, When this happens, often 
lilt . 1 . dym - ■■ ,: .M : " 11 1 11 1 v.' I- In Maine iM V etht With few exceptions, though, when im'h 
h,is-i tuuihk- operating software, the mpowfhlfttf i> the designer's. 


TIP 


When someone loll; you (hat he 
is having bauble opening your 
sdtware or website, first (hank 
him, then find out v.here you 
went wrong and correct the 
problem 


If you ivmil u> find! wit what the IIKIS W4FH. Apt is only QIW way that 
i l,iIIy works—you hu e id ask diem! Hind out alt you can about why they 
are using you r software. What hfoui'l'iT them here? w hat choices to they 
expect lo see? In, whal environment vvi11 ihey he Using your software? 
When our design is .Lt (he Murvh urd vtiiee, show Li Lo (Inin ah-l -isk 
I hem to 1 ry to perform various fund loii:,. In arVeral different de.Mgn 
options and see which one they prefer, l ater, w hen the software or web¬ 
site is available tor resting, invite some of them in to try k out. 


Adhere to Established Design Principles 

The field of user mlcrlave di’dpn, .ill hough si if I quite young, is rapidly developing; a srl of heat 
practices. These principle:, have evolved through the experiences ,md contributions of many 
processional user intei fate designers and through usubiliti/ rescan. 1 1 performed at ufijjwfttttie* 
.ind corporate Lrh sellings Some of these prirh.ipies are spec ilk in nature thev apple id a par¬ 
ticular function or circumstance. F.yaniples of these principles may be found thmughonr ihn 
bonk. Other principles -ue more general, covering .i wider rrings' of situation*. V number of 
llicsc are covered eji lire nest chapter. 

I lere iRhn example. 1 , ol user interface design principles that are specific 

I, [fan clement (such M ,'tl Eiul huico.nl is repealed on multiple sc teens, then pla L e that rlc- 
nic-nt jii the game position on each screen that it appears, 

1 . It is more difficult to read nil uppercase I, jpualiwd} letler* than A miXtUtCof upper and 
krwereaw. USING AL 1 . UPPERCASE LETTERS ALSO MAKES IT SEEM LIKE YOU ARE 
SI IQl' I INti Al' YOUR AIJIJ] I N't. H. 

file usability principle-, .lie useful Id pr-mluing prok’Miona and ih.-sycuiiw.tj (v the lie Id, bo I 
iheh L 4 E 1 Ik daunting. J'he sheer volume ol >Uidj results, often critical Ot conmioiih held 
beliefs or often-used techniques, may lead beginning designs io condude that eivnrhw^ 
they do is wrong. With experience comes the knowledge lhal the principles fxisl lo improve 
our design skills, nuhling us. to better serve our audiences and clients. The iiuue evpi-rii-iiLcd 
you Ikcuiik in designing mull illiedia software or welwitev. the easier il Iwcomes lo put new 
findings mio perspective and determine liowhesi to iooOfpOfate them into your own work. 
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] ] i l" V\eb, of course, is -I grot sutilteof current informalum about uew|v i-mt-rgnig informa¬ 
tion regarding usability h provides multiple forums Jor the nearly uutmvtafleoif&exiJidiigeol 
usability in formation. Those who are inirr^td can subscribe for free in j number of etec- 
litmic newsletter* nKitsining .truck * and summari™ of recent rewarch A recent Qn^c 
search {http://www.googlc.Ccmi) of tile ^hiiisct 'usabililr yruupC lumtsl up 311 eiilric*, 

I lie rapid rise of the Web has led to a growing group ul pfoliudonal practitioners devoted 
almost exclusively to website usability. This group, led by the eminent usability expert lakob 
Nielsen, concentrates its efforts on what makes websites successful, especially from a com¬ 
mercial perspective. 

Thiouglnmi Ibis book, we will discus* user interface design principles as they relate in both 
the Web and multi media soft ware. We will jHxse design problems, present possible solutions, 
and analyze each to determine which is the hesl approach. These discussions will include cov¬ 
erage of' many user interface de>ign principit's. 

Graphic design principles such as balance and sequence, are also important to the look of 
welwiifs .tin! nuikimrii .1 Stjft w 1 rt M.irv on lb il books exist th.il loh’i graph it design prill 
uples in wonderful detail. Graphic design principle* are beyond the scope of this book. 


THE COSTS OF 8AD USER INTERFACE DESIGN 

■ Imagine being stuck in a room with no visible* wav u> ger out. 

- Imagine being lost in a foreign country and. being unable to communicate with anyone. 
When you finally find someone who speaks vour language, he forces you to listen to his life 
story before giving you rhi' directions you need. 

* Imagine being fbfeed to make .1 decision with irritxii Coil sequences when you don't under¬ 
stand the choices. 

* Imagine being on a highway with w» many signs com pel inn |r<M V lV ur attention thal you 
Cftn'l possibly pick out tilt one you need to follow, 

■ Imagine having 10 rein 1 rod nee yourself ever v lime you saw yoiw best friends, 

* Imagine hat mg to walk a round the block esc is time you want to move from mvc room to 
another in your house. 

* Imagine being iix 1 rdiblv hungry, but itnahle to figure mu how m open the refrigerator. 

* Imagine hiring an employee who refuses to do what you ask of h im and makes you fed stu¬ 
pid (or asking. 

Experiencing any of the ftituatkms posed above might cause feelings of frustration, anper,and 

helplessness. (kid user irtcrfjtcs suhiecl users to similar emotions countless times each day. 
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* Were taiU-n to j Web with no visiblemniuof Ik n> i known piig.e* 

- A group of buttons is Llisplavcd with cry f nit' ktmft whose meaning Of hinclion Wf can not 
guess. 

- A Web page presents a cuolMug array of text dnios, poorly organized links, utibiguous- 
ly labeled buttons, and meaningless graphic images. 

* We arc limed lo rcis-JH- (he identical user information that W* provided to (be same site 
veste 1 claw 

* V tntori.il program requires that We In k (be rigid arrow lhrough 25 screens; of informa¬ 
tion to gel In the review quis we were working on irslerduy 

’ We aie presented with a modal dialog boy that presents iwo undesirable clioices, from 
which we are forced to select one. A modal dialog box is one that forbids the user tmm 
-■■I ■ - ling ,1 ny oilier buttons or other controls except those within ihc box. Figure I-LG 
ihnws jji example of j modal dialog box. 

As chili browse the Web or Lise software applications, begin developing your awareness of 

usability problems. Notice when you have difficulty navigating a particular site or under¬ 
standing an icon or button label. 


MO 


A ir-ada ilia-r- ids. - a Ihe oiw shawr hE'a, 'squires It-a i#sb»s actum. No crthe r controls an It's sersanar Gage- 
can bu Mt osEsil jrit-- the user nets on Hi« ccilrols wilt, u mis sex Usm nLir'ac-d Basque's are ;ratfsia% reduc¬ 
'd (hoir du jei Jv i. l- on «'iuil ji Juii:-u; 
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Al fhou gll WC know of no Hi lilies (IljC to iil I us i vcl y link knJIv 1k > i j: i iul 
Hoflsh.uc ui MKfolSvd health n^ks nearly all of Hi have felt our blood 
pressure rise anil our stress levels peak a> adireet result ofworkirg with 
software th ai seems unfit for hum.in consumed ion. 

I ■ i i long time, si pwttauJaf behavior of popular appl it at ion* programs 
lus been j i'L'j.1 strew, producer. It occur* under certain conditions when 
.1 U 5 *r load*,! document ol' Spreadsheet simply to print It. After Uivok 
ing the print (unction, (he u^er attempts to close (he application, only 
to he prom pred by a d ijlt^ box ask i ng if the vs?r wants lo save changes 
to I he doc uni cm. I his i* .i disturbing quoit ion, since the user did nol 
make any changes to the document hut merely printed it. 


I TIP! 

Practice Expressing verbally the 
problems you encounter when 
accessing software or websites 
Util? specific language, such as. 
"I don't know how to get back to 
the sc<eon with the menu" This 
will often suggest improvements 
1 hat could be made tc the design. 
Such a5 providing access to (he 
menu on every screen. 


Since ohm users know that applications usunlh don't prompt io suvt 
changes unless you have midi- ai least one, many users conclude (hat 
thev mu si have changed their document accidental I y, perhaps by inad¬ 
vertently striking,! key. J lies llieu carefully read through each word of Lheii Jocumonl. look- 
ing for the rrranl change. Of course, they never tlnd it because they never made a change In 
the first place. It was the softwares error in presenting the prompt to hvc changes in the Jdl- 
nmcni Fliir users carry around a nagging doubt that there if an embarrassing. undetected 
error somewhere in their document. Wilh time, users learn to ignore the message, possibly 
resulliug til embarrassing iftaJverlcni errors in true '“k) r . who tried woll taslikliL 


Creeping Features 

One ot ik- k‘si-knov n contributors to unusable software is a phenomenon known as feature 
creep. Feature creep is the tendency for software products, it> become laden with features over 
lime. sacrificing Usability. Here's liow Li often occurs: A company creates a software program 
that is elegantly designed and well suited to Us. imended purpose and audience- because of 
this, people buy the product and are happy with ii. Eventually, influential users, such as cor¬ 
porate users who buy many copies of the product, may brgin to request that new features he 
added- i>. the company may '.imply want to gain additional revenue by encouraging existing 
Li- n rjjv lo upgrade to newer versions Mi j fee. lo coulinui' receiving upgrade revenues. there 
must be newer and newer versions, each with new functions not necessarily amicipaied iti tile 
software's original design The weight oflherf new features makes the original. vital features 
much more diflimh Ui l'!ml md use. This i|dptcull) Cue for first-time users, wrhn did mil 
have the bone fit yf learning tile proJud when il wan small and efficient. Figure l-I L shows a 
i vpicsl. example of a mature, teature-laden product. 

Users do not have much of a choice when it comes lo buying the most widely used applica¬ 
tions, sLich as word proecssor* or spreadsheets. With mu competitive pressures to make soft¬ 
ware easier lu Use, there is little im pedis fitt Mil sofWi» companies to com plclcly 

redesign their mem ubiquitous [mxluiii. 
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Computer-Aided Difficult-by-Design 

In some vases, winilf industries have emerged So co i opensate fur software Lli-.ii is difficult to 
learn ami use. 'IradiLiitn jI computer-aided tiesign'coiuputei aided inanufacllarmp 
CAD/CAM) software is list'd hyenmnpanies such as architectural firms and manufacturing, 
companies. The software requires a major investment in lime and effort to master. Hundreds 
of vtJinpaniL's have hecis established that special ii» in providing training and consulting irt the 
use of this software. An easy-to-use (.IAIJ/C 1 AM product mighl not only rcvolulkinifC tile way 
buildings and products are designed, h might completely change rli-c nature of many of these 
consultants business. 

Although we know of no hrigjtton being brought againsT perpetrator* of user-unfriendly 
websites or multimedia software, peoples ttiterame to tiling' ihev perceive as harmful to their 
pliy steal or men Lai heal ill tends lo dec 1 ease with lime. In feet., it number of cum panics have 
colfabo rated to trwk »software «kr' Ml] of right*. The dMument covers such topics as gen¬ 
eral software product quality, accurate delivery schedules, explicit pricing, development 
accountability, technical support, aild lull disclosure ol software vendors’ business practices, 
Although usability remains a more subjective tuple, its issues continue tn gam publicity and 
momentum. As wv learn to quantify and qualify what constitutes a satisfactory experience 
Irom a software user's perspective, we hope tlui! usability will also become an integral part of 
the software users’ bill of rights. 
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Counting Hits and Misses 

Them? is another, more measurable cuat MsoLialcd wilh Jillikull Ln use software and websites. 
I hat cost is tuutiev, j.j ill it icniuJis when user* who want to nyakv purchaser from commercial 
websites ary frustrated in Their attempts- I he frustration may arise for a number nl different 
ffasons, Sometimes an vnline merchant has the ri.ict iicin a shopper is looking for, htn fh£ 
potential tustftitiw simply niniiot Find ii. Or a iwrchtinl may iruiki; il difficult fox 1 cusiocnen 10 
figure out how 10 pay for iheir purchases, In other insianctsi a nierchgui mav insist that a cus¬ 
tomer fill, out a lengthy information form before they can proceed to checkout. The cioiomer 
m,iv m i uh, i m j’ivc additional mfonntfioij m tht merchant anil may abort the puri'li. .1 

I uckik commercial websites give us an excellent opportunity to meavure ihe cllieciv of user- 
ccnltTid lIuvijjii. 3 ] n>ilu<|s such AS llitlfok and WcbSTAT can track imporlanL Mblift infor¬ 
mation, such as him many visifor»have viewed each page of the sitcJww mam potential at* 

1 timers have abandoned their piirchaises before completing them, and which are the most 
common navigntkuial yuuhs list'd by visitors. Figure 1-12 shows a WehSTAl report or the vis- 
i ted pagev nf a wdiMle. 



M2 


t irTi -i i t rv (tawing nw v-1s r s:- ^ wifrgig N«m -"i? i-he ni"-5»ds menu s“ny. n; i-i- v« m : r ^ t :H ^ 
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Owners uflulvy LOtHtlHrsial wellsite* track usage infuniial iou vusli a* this Jowly -mil use iL 
to improve vale* generated by the sii«.-, it sulimiilh fftow that ©any sJkipptrs abandon ilicir 
purchases a Iter viewing one «f’ the pagies of the checkout sequence, designers can analyze the 
realms for the pmbicms %«w ii h ilie page, change rh« design, and get almost insMtiM neons leccl- 
h.K k on l he change's effect on visitor behiWmr at 1 lie site. 

Obviously, online iisltl han Ls u.mt to put as few (ibvL.icIcs fit I he way n( ]vurehiMf* u. possj- 
liJc \ vtfetlut h.suuosluJ in --i-iiii.e piuCiMs .imvl soiuink he easy u - 1 ■ i niivl allow 
potential customers to see the range ot products that exist and to search tor a particular prud 
net hy name or product type. Visitors should he able to sec a dtwe-ttp photo nr drawing of the 
pnnhict as applicable, There should he well-written, compelling tent that dcariy and suc- 
tiucth describe* lmlTi product’s ICiilUfO -Hid benefits,. 

Most MIL’S that sell products use a shopping carl symbol M the Wc4m In fiwWe visitor* to tee 
what items they have >d tv it’d for purchase. Ite shopping cart symbol is a metaphor, which 
is j t.iniiliar iiimiv used In make an unfamiliar idea, experience, ut pnuCesft understandable, 
i inline vendors often use shopping metaphors th.it correspond in whal shoppers do in ,in 
jctuiil, lu IuuE - and murui. store. Since peuph know wh.il a dropping cart is lot- il holds 
Lite Hems they intend lu puicli.i m.- while tliei Luiitiiuic shopping — Jl ts an effective ineLjpJior. 
Online boutique stores may substitute a shopping bag for (he shopping cart symbol. 

I ho-siz who gel too c real he with well-undersiood metaphors do sn at their own pen I, espe¬ 
cially when it aborts the process used to enable shoppers robin goods online hn example, if 
I ;un a seller of baby product*. 1 may think «1 cure io call the shopping cart a “shopping, 
si m IIct-" 1 Sl in i r ii* -1 - wj]J appivc iiile *ut i tk'vemvss; mam others wLEI ini-n entirely, con 
eluding that this has something to do willi shopping for a stroller, kruiltaied with tlieir iiuihd 
ity to find a way to See which items they have selected Iot purchase', they may abandon their 
purchase and seiirih llor a friendlier site 1 is shop. 

Shoppers know what to do when they are in a brirkx-.ind - mortar stone when they have fin- 
i*h«l ^circling the items they want—they pmct-cd to tin* checkmit counter, Likewise, a link 
Llut ll worded ~ Proceed to ("licckoul" is a clear way of felling mi line shopper* what In do when 
the\ ate ready lo complete llseix purdi&w. Merc again, although a vendor may be tempted lu 
chouse ii catchy metaphor ilut reflects the Stare's products or diameter, it is best 1« resist. 
l-iRurt* 1-13 showstypic.il Shopping t Vtrt and Proceed to > hwkuut controls. 



A fflep toward creating tnme usable software and website:, ic In uihIli *i.u id hum,ti| behavior 
and lu apph I his information to the user interlace design. When kned with il new situation, 
people usually try in apply what they have learned from similar situations in the past. Car 
owners who have been t.icsd with driving il renl.il cur know how I rust r.King it is when the cun 
tnk th.it .ilIiuM IIil lL-mps-tiiturc. Windshield wipe rs,and Eights are nut in their familial places, 





I (HAPTfR 1 | 


21 







1'13 


Tile USB of w&ll urtdi.ii j[£jij*l metaphors such an a shopping cart ami checkout make It easisi lor shoppera la com- 
plala Ihmr purchase* Designers art wke Hi EOnFtfrmi tafhMrftiWUl OMWrtiMI iHd apply efoatiyity olsowhart 


Weh surfers hM begun In expect cnnvrntinnH in ihc phcrmenl lit dements on Web papev 
The idem LI yin g logo ol U • ■ m- nlun d:.- Liinipjuy lugu, is usually posilioncJ at (he lop iefi. 
Lji many wki, clicking lIii? icon on j pace iOliver dun the homepage) displays the home page. 
A test entry box lor typing search tnt is often near ihe kip right. The main menu of choices 
often appears siting the top nr down die left side. 

These ernmisient pLkemenls have become ifr fdcicr standard 1 - in web-site design, Designers are 
wise Icj uhe advantage of ihcir eJtblcrue, If w know that most users cxpecl a parlieulji ele 
mem to be located in a particular spot, we should be happy to comply, tl is one more thing we 
tan do to make a cLle easy Ionisers lo imdersiand and navigate. Some designersconsider such 
conventions an affront to ihcir creativity, Deviating fmm pt peeled conventions certainly has 
its place, such as when the goals of the site .ire to defy such eon vent Lons, 

liowever. what if the gas pedal, brake, and steering wheel in our rental car were similarly at 
the whim of such creative designers! IVrliaps tin c<uitroL ihai looks like a steering wheel b 
actually the accdfraton liolare it clockwise io pick up speed, and steer by shiftihgvyur weiglii 
in I he seat, What looks like the horn is actually the brake. A car wuh such features would hr 
considered creative, ,til hough nol very useful. 

■ li.iv, i*. useful ill interface design when il adds |o the user's experience, rather than 
delracli I rum it. Often, tins emails making the life nr software mure usable, theft bv making 
the user more el lie ient. Most people prefer that ihcur jiuomobile com rub behave utst the was 
they always do. And mo si site owticts appreciate it when their visitors can forget about the 



























22 


\ 


I 


ebJi ; I tig ?»I 3 bow 


sites design ami i'mu\ on its con lent. That uitl, if a designer «in demonstrate a true udvan- 
...ill hi .1 new k\lllUi[UC, one UuL is cawjy grasped <Llld |JJ‘ uUTWctgh* the Tiercel] t± of u time- 
msidiippio^h, then by all means ust' it- 


SUMMARY OF KEY POINTS 

* Design mulfimadia softwaw and websites tbit take advantage cl the true powui of computers. 
Da not create software shat simply deliv&rs information :;nu n illy men cud (or anoifiBt medium 
such as paper or video 

* Making website visitors feel like (hey are perl pf a comm unity will keep them coming hack to 
your srte Oo not try to force them to participate, however 

* Use cQmjtu&ng power to simu J ate hazardous. expensive, -or naccessible systems end process¬ 
es. Design websites that access real data TO provide answers lit questions that your audience is 
asking. 

* Understanding thi» needs df your targe' audience i- the single great nst riaterntinant nf the suc¬ 
cess or failure or youi design. 

* The field of user interface design has boon growing rapidly m popularity as users' demand for 
usable software has increased. The related field aJ usability engineering concentrates on meas¬ 
uring the ease wrh which users are abln to use software and webs-ies to accomplish their 
goals 

* To be effective, designars musf become familiar with use • mterface design principles. There are 
.1 n.imhpr nl channels rhnt designers can use lo keep current with (he late si usability lesaarch. 

* As software applications mature, They become more and more Heavily laden with features, mak¬ 
ing them hmrier and harder lor new users to learn end become productive with them. 

11 Poor use bi Irtv de sign has been b lame d for si gn ilk ant sa Ik s tosses du a to online shoppers abort - 
mg their purchases Using Wuh trnffir reporting software allows designers to lei tel out such 
problems and instantly see the results pf the improvements uiey implement 
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in review 


Whai is u atr centered clesi gn ? 

What term is defined as die means fey which humans interact wdfi a computer to 
fulfill a purpose? 

Define the terms effectiveness, efficiency, and satisfaction 

VWhai are some jdveiitayt'h to specifying the user interface m paper before a is 
developed!? 

5 VWi&t is a mod al d iaiog box? 

How can hit nocking software be used to determine problems in a website's prorh 
uct ordering process? 


exercise 


Steven. Jubs. Founder of Apple, sought new ideas and solutions that wore "msa Italy 
great" meaning they exceeded everyone s expectations. What computei applica¬ 
tions have you used or customer experiences have you had that could use a com¬ 
plete overhaul? List one such experience end dismiss how you might use the power 
of multimedia ancf/nr the Web 10 make il insanely rjieut 
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objectives 

AjiiiLyja i anitplfl ilASPgn probkm 

EJiarmm sewn* soli rjpfi:j fo i m ues.ign prnbNia nmd nsnrifee ily» idviiftigtifli and 

dtaad vmtagbs 

Desciilie the iraptntunco tit desFgn principle to mtt dint^rf^co ctosiijn 

LicaiiiJiio design (K3 HlejiIl*> mink Famous by DaliHld NariLun, m eluding vi^ihiliry, iimppuiy 
Iced beck HuJ dFFufdjnun 

OflKfibt Film Law anil rrs sppllcaijon ta user ihKiirlacs dnjyn 
Analyse oilier itei.qn principle* ihipllfUrflE to user JitiEitnca rtgsign 


introduction 

Gfflll AluKkniHii snhTtoitfr and webiilei Am't jusL happen, They are the regul nF the oisr inlerface 
itesigner-s careful research and planning, stricl attention te? detail, and ocensiQftal fteshas &f mspi- 
JdLiuii. Whin working o?i I!;h design nt a particular screen, page, or I :in nil i:h : . yen tDiitniugiiAiy WRi-gh 
oni cwisJmatiMi agamsi another Oftan iha s&toilwsn to an# prvHm causes a ddi^iunL prohlirm, 
end you mu^t pefsiFTt, applying creativity and sweat. unlil yon Find that heitler solution 

Uli^ proem is fflpeawd dwercs Oximes during ihs design etea tti project With aup^rience. yotl wll 
learn Ed -i|ijiclJy abmuiaEA many pale pi Tin i soluiitms in Invui ol These dppiasehus Him ire mast likely 

la stint and 

In many nnsHH. ynu nnpsE nmke compromises amring tfiR! venous apprnachns, prioritanng Mtn 
strengths oF each to arrive m the iikise saiisfaircory soHuKiekl Thera is soma Hutto io the exunn. per- 
Ii4jps earned by u FrusErmod designs, that "Pe^iyn is deciding Flow you want la fail * Young design 
ers elm take ccirnrprt ip knowing That every user interlace prahiprn hau al FeUit twin sobiMnn 
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THE DESIGN OF A MILES/KILOMETERS CONVERTER 

L'o help lLIusItjIc the ihoughi process thuii ^companies design, here ii jii assignment: 

De^igrum interface that re^aWes adult jj.-t r ? to quickly convert mites if tfce a^uivith^ru mnnbiv yf 
kilometers w re' ammf kifomfftTS tp mrfes. 

Trv Ed solve ihis problem yourself before reading fun her. Make a sketch of your design on 
paper All hough we have not oet discussed all of the various screen controls and "iJgeti at 
your disposal buHonuicriUs, shs^kUives, IckI entry fields, and the i«0 ■ nUMjlflffail haw 
Seefl and Used these common eJcilimts downs of limes. The Jiexl part of tins chapter will 
explore M)me possible solutions to this problem 

How might you -approach sulUu problem' 


TIP 


When you are trying to solve 
some types of user interface 
problems, start by ihmkincj about 
how you would solve tile prcib 
lem by yourself without a com¬ 
puter. 


C+ihmiI Uliii lu Fill ■nehl--. 


I un-sTrl MlrmnLrni fti Uilr *. 


2-1 


A simple me-nu v\ two button;- nttows 
user to salecl iMhicn Vim dI can- 
verssin “u- pgric-f^ this apprcuEft mir- 
s iirs- ijui lirstflden A 1q c-i aiilH u cun 
■ *|riuul I? d du>! o\ ihtt pJo l *eiF« WV Mvill 
Iry 1o impirMi ii Inltf 


Converter Design Attempt One 

Hmv would you pertarm such a mmfrsion without a compute! ? hirst, 
vou would prisbablv need to- know if you weir convening miles In kiln* 
meters or kilometers In miles. Your design must provide Mime me,iris 
for tils; user to make ibis choice as wdJ. Eigurc 2- L shows a pair of pud i 
burtons rhat mipht be used for thus purpose. 

Lei us assume that you wart! to convert miles 1o kilometers. In our 
example, ihe user will click the first button, Convert Miles re 
Kilnmeim. This might display a «twu with a texl ■ entry bus where the 
usci an type the number of miles to be converted tu kilometers. The 
user will type the number <n miles, then perhaps click a button labeled 
txvnverl io KLlometers to perform the conlenioi. Well assume lhal the 
„i ill wire will be progr.i mined In perform ihe proper comeNdiij The 
resell I uU he displayed to the user, figure 2-2 shows the completed 
sLieen feu* ihis approach. 

When looking at llns approach, it is apparent lh,Lt the user could pc-r- 
lortn more aniwrsionis of miles in kilometers In entering different val¬ 
ue* for she number of miles, again clicking the < omen to Kilometer* 
button, and viewing the rum ri-suh. However, v. fun if ihe uwf w.irtls to 

du a ... kikmu-tc^ m miks?There i* currently iw way to 

get luck hi ilie original sawn—the one with the two buttons labeled 
“Convert Miles to Kilometers” and ‘"Convert Kitamelers iu Miles 5ince 
we will need 10 add-il control for ibis purpose, See TiA%c - added a button 
labeled “Relutn tn Menu." shown in Figure 2-5. 
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1 |*J| fen -*ip 4 m #1 m\\m be cuM|t [ Hjj ] phIIm 


Ln\mi dii rtmlUi.i id niitah Id Ml fTlfliA 

V.firw.n In Kllprei^iiirs 


Ctjo-vrri in Kir-imc4rrs j 

3f1 .(? yimwtttn 


flrpjHi 3?1 tl lofiiffitir*^ 



fi^lulii In MgjiiiJ 

• gi * 2-21 

2-3 

In rh;i Jiuties-to-kiilrtiMsera corim ismii sc* nun. ihe 
user u 111*1!. me iiunilm c! ii HJL- I nn rliuj! '!! iul 

1 Mr fSEturn Id Menb hintur alleys (hs ii^*r m retiim ro 
die iik iib w e qftyfin Mc-meiers La m 


Eon to pefl«in Hit! cimivbiiIm and display tfi# result 

To complete cKiv rough design wr would create I he screen th.it is dtsplasxHf if the user clicks 
the Convert Kilometers to Miles butlun. This would. look much like the Figure 2 -3. rvi rpr 'li.r 
dll instances of the word "miles" will he changed to "kilometers 1 * and "kilometers" will Lie 
charged tn "milch.' Fhe Inrmula. used in the % nde (f> perform the conversion will ,i|sn he dif¬ 
ferent. 

Note that there are a nuinher of adjustments tvc might make to this screen to make it clearer 
and easier for users. For cuamplcr, we might in dude a title on l ho screen to identify its pur¬ 
pose. '] his discussion of minor improvement to the design,, although valid, is piemamre. Ai 
this stage, we should he asking questions about the approach itself, Are users likely to he able 
in figure out how to operate the ^ rmis to perform conversions? The answer is probably “yes" 
tl I here a simpler way to approach this problem, perhaps Avoiding the Complex.!! y of multi pic 
screens? Perhaps. There is only one way to find oul—Ivy .selling this as our goal And experi¬ 
menting to see if we can achieve it. 


Converter Design Attempt Two 

W* designed the sequence of scrums to minor the way we would 
approach the problem if there were tut computer. First, we had Eu 
decide il we wanted to convert miles to kilometer* ur kilometers tn 
miles. Our initial design provided a menu of two buttons to allow the 
user to make this choice, whal if we provided text-entry hose* I nr Imlli 
types of koltvtrdojih on the sjim- screen? This would aIIhiwus to reduce 
ihe riumljer of screens from ihree to one. a definite improvement- 

Ofte way to accontphsh this is shown in Figure 1-4. 



Once vnil have sintched out a 
WTimthlt! EolutiDO to a usur inl&r- 
i. i L-e problem. think about Iidwt 
the design could be simjtliiied by 
couth ini nij f reorganizing. or 
removing elements, or perhaps 
by rethinking the approach 
entirely 
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2-4 


I* tfc* W*dn, hutfi Iuicmas fttue Uklm included 


C-onwrii llil*cv in Aiimntlpn: 


JIMI nifes. 


Kwi It 315-1 vf fcilvmwI'H'i 


pn thi KnriM Jfruc' , i. s, im|:« "Iv ''<1 Ihli dfll'fln hy 
r irr ‘iiilTii'i rig i: hifj'ni nilfl JiN tills Iflf 


firrnrt HiHmHk n» Mild*. _ utotHam* rbiuk 


B*uk- CflnipfSM?H I mcnon Fl*s<! fiORuOtfsion OCCURS 
at Hi# usiir f mm the vftliiti 10 b# eoflwtrted 


I he user ivpes the known value into either the mile* or kilometer^ Ee.\r-eiur. box. L he m>( 1- 
ware converts the ulue“mi the fly," meaning th.u .1 (imiersEon value will tie displayed a*s*ion 
,is (he M%er lie^ins mi type values into the bon., for example* if the 11 ter wants to tonveri |o 
miles Lu kilometers, he will elk Si. tin- test-entry bus libeled mill.-* jjhL bei-iii t V|iin^ the num¬ 
ber “10" into it. A* soon as lhe number “1“ is typed, the kilometers fidd or the same line dis¬ 
plays “ 1.609." corresponding to rhe number of kilometers in one mile, When the user types the 
" 07 lhe kilirmcliTH field changes In 16.093. the mini Iter uf kilo meters in 10 miles. 

Fvrn though the ((irvmiim value is (.hanging as the user types the 1 u -j'lelr mirnhtr. most 
people will not have difficult'. understanding this. If lest users have trouble with the Value 
■.hanging as l hard* Lei * are tvpcJ llie program cuuJd hridh delay Lhe display oJ the convert 
cel value orce thy user hqpns typing. 'I he display- of lhe converted number can Ik ddaved 
until the user not typed additional mimh^r* for one or two seconds 

It should he apparent that a user interlace designer can benefit from programming experience 
even if she is not the one assigned to code a particular project. Without such background die 
designer is dependent on developers or engineers tu say which parts ol the design tan and 
cannot be coded readily. A designer who does not have ibis experience will have diftkuJL* 
gaining the respect of her teammates. 


Minimalist Design of Converter 


Figure 2-5 shows a wa y to solve our dc^ipn prohJcm very few screen rlenient*. Such- cm 
iippmadl is known, is .1 minimjiliit ipprcMcfi, 

The pr^Mcm reilucvtl to its simplest terms. The text-entry boxes jpjH’jr on dtlu-i -iJi- ul ,lh 
enL.il. 1 .! il h|uj[ 1 ■ iign. The ust'i simply types whiLhevtii vjIuv is Lumen in (He ipprupu htCc 

bat, mi ihu con*«LeJ vj| U t is tlispLiyrJ m (he »ih*r Iwx, The simplicity of fchb solution ietb 
tttfisrvijig to most drsipnerh. All cMrancous elements such as burtons und bkl$ arc 
removal, and <mb ihc hair essentials remain. We have reduced tire hand km ol oon^L-rtinp 



oii F- mirwTMli^l app™di HHlucta re p i>li?aiin and Hnlution to Ns fJmis eal 
"nrrn J-p LiS-ET E-ilTSTS A HuTnhflr I p, il nppr 1 |i r itp ici-r pner^ licit, n"si? "tlfl 

canvensd value i^i dis-playen m me i fc irr 
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miles and kilometer* Id five dements. Mnrhing further can he eliminated Fmin the screen 
without the basic functionality being Inst, 

Designers ill olher disciplines, such at atUun . i m l , nidiMi i-d design. .imi fid lion design. .ik. ■ 
practice minimalism. Wlial minimalist designers sliaru m common, regardless of what they 
jk (les^ning. i* that (hey use as few elements, materials, or pails as possible. Experienced 
designers are often drawn to minimalitf approach e* because of their cleverness and apparent 
simplicity. However,, 11M as some inmimjlist dteir design!* skimp nil ctmiforl, care must he 
taken to ensure Lliat users can understand and use minimalist screen designs. If the (esters of 
our minimalisi solution are having difficulty understanding how io use the ilesign. we mav 
add a simple i ml rut lion line. \ hts may well appreciate *mh an addilion, but it will never sit 
well with the- miiiirnalkis! 

Was your solution similar to the ones wc presented of WU it different? Most in ipt mainly, 
would your solution* once coded Jh 1 easy in understand And use for most Adults? Try showing 
a friend the sketch uf your solution without explaining it. Can your friend figure oui how lci 
operate your converter based nn your sketch '■ 



THE PRINCIPLES OF USER INTERFACE 


L s*r i nt erf ace designers are guided by design principles that have proven their value over 
many years. Sonic of these originated in other design professions hoi Apply In laser interface 
design. Others Haw their on l: iris in software anti Web design. 

Form Follows Function 

Louis Sullivan, the famous late architect wd me nun - of E : rank Uuyd Wri^jir. i, LU-ihu-d with 
coining ihe phrase, "Strain Mentis function* one of the most important of ail design princi¬ 
ples. This is a simple. Hcgart way of expressing the idea that an object’s or entity's form—that 
is, its shape or .rppv.n.t«lsc cmcr^L’s from its purpose or reason for being. 

Farms dial aw tasL-d on function ore beautiful because they have integrity! their beauty 

emanates from within, Passenger ieliure nhu.iI) devoid of ornamental their sleek lines 

perfectly represent tlic-clsur txpreiiiiinn of their tutKlion. ibis Ls tiui to say that the function* 
by itself, is the design. Wc can program rhe buttons and text fields in the examples above hist 
lfe i ties apjwar Allli »ugk wc e in nuke I he coflw.in - -| • N p. h 11 I •« users ctfifrienn 
would he h ittnilis.nilly improved il the i.ilciiH of .1 graphic ,11 list were' applied. 

[Jchigucrs who emphasise An ohpvtV* total at die expense of its function si re more likely tfiCK 
ate an unusable object Hub k not io say that an lorni cannot be determined indu 

pendently of its function. You mav decide shat your dream house viuii look like a giant pirn 
of Ben and ferry's c'hrrry C.Arciit fee cream. If so, you can probably find iin architect who is 
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willingu» make your tli L-mi come irue.ThepredeterminedfNl%twwwt may well constrain 
ilit architect's Ability lu create a hume that. will fluid Lon well .b ■» living space. 

]» lJic previDiii dupiiM', we dis* LcsseJ why it l> important to view tbe design oi multimedia 
h( if )wait anti website user in(effaces as .1 process ibat bqsins with understanding the mxds 
tke proietls (calunct. ils intended audience, And the envimnmenl m which it will nil, With 
tills thorough undent .Hiding of the | , «ri ijct t % fund inn, wc can proceed curtlidcrtlly with the 
development ol its form. 

In |us bonk. j‘ Vit 1 I K'sifO trf Eivryiidy Tfutlgi (ClinfllCy/ Doi^i 1990), I Jo ml J Nutman 
describes the relation^ ip of visibility, mapping and feedback to t he dciig n of 0 sable obj&c is. 
Although Norman is primarily intercstert in ihe usability of tangible items, such as relrigcra- 
lon. swin^ai'it; glass doors, ami slide projectors, the principle! He describes are applicable to 
11 vc I interface design. 


Visibility 

Have ',.i. ,. . | .. J c 1 .. i|. let U it was sm .sleckh d, ay k .! 1 .u .0.1 .ouldi 1 r.-a.-.k out 
hw 10 open it* doors? You. may have been looking tor a handle—something to pull the door 
open—but im such control was visible. Perhaps ymi discovered *or were fold ' that you had to 
simply push in slightly or the duor to release the catch. Although you may have fell h h dish 
while you were siruggliug to open the door, you were simply v ktutiucd by j design wilh pour 
visibility. 

In inti ware design. 1 Iil- principle ■ I visibility describes how easily the user can lind tile luik- 
t ion 4 th.1t the program or wrbsitc offers. When ihe user cannot find a needed function, even 
though it exists, in ihe software, poor visibility is the culprit. The (unction may not he visible 
because it IS hidden deeply in the soft wait- in WL-hvile. IVrhupt ic is accessible nnlv from .1 sin 
gle screen or page. The usef lu, to remember -In- ewKi path fu Il1.1l screen or page to locale 
the needed function, 

JVor viMbiliu can also result when too many elements are presented to the user at once. Word 
processors, graphics manipulation software, and other applications are particularly suscepti¬ 
ble to this type of visibility problem. The sheer minilxr and complexity of fund ions ,0 .lil.ihle 
through HKllUk mullipleluolhaiT uf billions, and othercontrols nukes finding ihccuiL need- 
eJ LiHUrol much more difficult. Such application* ate especially daummg to new users. 

Some appl 1 i *t imi designers have tried 10 ease visibility problems by limiting the views 01 
menus to most-often used Items and items Jut Hie user has recentb selected, figure .!-n 
shows a file menu with hidden items. The user accesses ihe ,nlditiiui.il menu items hv hold 
mg the mouse dow noil J UtelUl ilem, by clicking the down- jraiw control at the DottOfn of the 
menu, or hi Hiking no action lot llx.nl! live vecunds. E igure J: 7 shows 1 lit- expanded bile 
menu, with alj dunces displayed. 
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The nri:xp=incflr1 rnn^ny rti®- 
C-liiVb common iltms an* rl-.j 
most raceiMJy axcatiEd 
:tems. The men ti s iiii^.i.:- 
iiict! viflts HCtiifilinij In 
.34 ; 11 This miy mhtiil hums 
km !eernmi0iTfiti srHrvwHfit by 
cn^f M'e pssftian 
Dl rERd irfilFlS Ilf tllC • ist 


2’7 


'lie esji»r jttj mem. .iKts 

:|' | I - 1 nsliiIi: -.1 vtm !drfl9 

ihM wamniilton Thu mtlfm 
of '.'art nfi-.' I'Mhi ■jnis- <U= 

-rrwie* Ih* rfi*hii\ vgittiliiy 


In this casf, ciihrin;; one visibility problem seems to cause ;inc(ilier. I imiting the number of 
menu choices i 3 i.it the user mm's dues cast’ flu- probfrm of too nunv choices hoi up |wvlllfti 
The tndMf with this approach is tlial ihr menu looks ilUl’i-u-iH depending nts wh.1l has 
recently been mcIoci&I. Besides contusing user*. h forces them 10 figure out how luutictas hid¬ 
den hinclicmS. 
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ThiL rc i-- mini her problem with these dynamic me mas. I’scrs ItMrrl To ;1 gi ven merm 

. mi r ]iy \ ,u.u: k- i| he) \i\ ni the list It tk.it ■ Itioil 1 1 « IU- ■ ilrpi ikli::;. 1 ■ ID UH^ tJiC 

user must, depend M>kh un l1 1 -; Jiniu k '& mmc for ideniitkaitnji. f| ls true that the expanded 
vtrMon of Ihe im-iiu shows all ot the choices m tlsc^H order Xotiee h In wever that when 
expanded, (hr rceenlb tCOWscd items are dismayed with a different background color from 
those items. not recently accessed The resullinic pattern nf dark and light Iws iiirther reduce* 
the menU\ visilwJiLv. 

Figure* 2-ft and 2-9 further illuslrale (fee disorientation (hut Can result when We change the 
position ot items 111 a :?etr The screen contains a tab control. %^hi^h or£.Lm/cs page* ■ «1' options 
lit lnfotmarion - -i similar ivpes -i 5 u- e simple, the tabs am; .i^d m -nM cmino* Mr 
the various mlem ojvtiori^. 

In Figure 2-£, the Fdit uh hiW been sdecied. Nnlue that e is. displ.ijfvd m ihe huTfom row of 
tabs. Now let x say she umt ^ ants l-u dick. on I he £ ^mpiltitailih tjh (n *cG nr change ii ** options 
Figure 2-^ shows the result when the user alecte the Coinpatlbii.it i tub. Motkc shut it ..mJ its 
entire now o0 t^i h.-. ha> sliiJted from the lop niv. to the boiiftifl row-. The effect is Very dtsoji- 
cntingpCSp^ciLtlv when seen forthi' first lime. The control ha* acted in an nnprr did able nun- 
nei\ and the user loses confidence in I he software as a result. 



2-8 


US*'* C^p^r^icl jn tic cor-^Hswnl lacsftim g" elemetfs such 
as- Labs "i:- l'ilIc-i :iCurii3 m* s^tiwira inUsriPHca. This irrtEi- 
IjLtf warksi I "in Ui.-ry -u thfi usui stitads tlihs Oft the 

ism! raw *i iNi cuointV at^irrtiHi lab 
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II srm jse- suigets a tub an the a^-er e??iiFe r^.v 

liirnps, tl*miiginu Lb* user's contidencti m Ite int&n^ft 
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Why do thf tep*ww Into pliilt to the bottom raw when selected? The reason is thai the lop 
row pages would leaver Lie betton iqw uh i_1ii.illi.-t, preventing iliem fm-m being seen .lillI 
sdea-ed. The u»p row ul uls sm-s i*» the bottom lw to ensure that all tab chokes are visible. 

The real! problem is that thewrout; control was selected for this function- A tab control should 
only contain 011c row or' tabs. This eiuh es the i iK lo May rooicvl in plan 1 no m.irier which 
one 'ducted. Th luiiid'i ih-e user’s i onfidcuee in die appl i l it Lon. Figure 2 90 iliowi a 
schematic drawing ol an alternate design that tiimijuto the double row of labs and help* 
Sfjlvelhis problem- 
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thrt ithuflMic driwlnj m n ii?g- 
ij.ij j-L-ud aUai nuli^m to Iha dwihla^o^ 

I fill tSIiiltffli ;i F;i! 1 MlecriS 1 CPtfl- 

gnr^ on 1i« !*h. Jhfr* * ftIMS 
It-a SETting s J ^i " M a1 fiat-n-gory 


Jw wad-only applications, wefe ^ ^t^ice response ippliatkwlSj -L-nalile usm to make menu 
choices and enter information using the telephone keypad or their voice. We'll use the terra 
audibility (udi-senhc the u- ■ willi w iich users cun locale drared functions Ml these types of 
applicative^- J hew; types of applications hlLvj can IteKfit f»m user initrfjct' design, us many 
of us who have 'Men htsi in these com pi ei systems can attest. 


Napping 

Have yim ever had Iroublr figuring out which light switch operates 
whith set uf lights in a large chiuroont or i* inference roomr If 5<\ then 
ytm understand die effects of poor mapping. Mapping is tlie rekifofl* 
ship between a coni rot, the ihing n alTccis, and thi o income ih.n 
results when the control is operated. l-vimptes of poor mapping are 
ooraimm in ilnr physical world. Which circuit breaker controls the out- 
lef in thebaihniom? v\ hich knuh operates which burner on the stove? 
Which valves do I press to play j X" note on the i rmupet? 



Whan creating a toolbar. group 
Iha hotlor i Inqi tally by hi ml [ion 
uml include specs belirtieen each 
g:uup to help increase cs visibility. 
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I kM^ncrs have jIm.i trcaLeJ example* of e-wellcm iiiapping. Norman cilcs the sc.ii control lj! 
Mercedes - IVnr a utn m obite- 1 ; as such an example. The clever Mercedes designers manufactured 
lhe seat control in the shape of the real automobile seat. To adjust the actual seat, wu simply 
perform sin- same upci-iliim on lhe control. To slide lhe scat backward nr forward. strait 
the coilliul and *Udc Ll lmckward in' huward. toajjusf lhe \eal upward, you pul] the Control 
upward, lb [JIl die MJitlnich hack, -Du tilt the controls seatback back. Jh is strong aasociai ion 
of 1 h l- con ten I n> ihc rcMiliirii; action is what Norma it calls natural mapping 

Control* that require lexi labels to convey ifoeir meaning often indicate poor mapping in 
nhjcL'lv For example, the falvls lli.il I ell n\ which knob cnntroh which burner «n 1 sKuflnp 
unite,lie ■! failure 111 mapping. Often 1 hese labels arc ignored, and the user simple uses Irialand 
error until lh<- desired result ts obi lined. 

Mapping plays- an important role in soflware design, Funr magiping forces lhe user's attention 
on the interrace, instead of on the task where it belongs. tJood mapping in software can take 
ihe form of buttons thal ck.irlv and simply indicate rheir function, buttons often contain 
symbolic pictures, called icons, m umvvi meaning. Unlike physical objex K buttons thal con* 
i.iin belli icon* ,1 ml well-written test labebcAcn provide deare* mapping to tluif associated 
functions Lhan buttons that hast contain iconi Icons without text labels sometimes convey a 
meaning th.it is ditlerent Iriirri wllal I he designer til tended. And sometimes the icons that are 
■.hdsi'n can verm downright silly—such tis using a life preserver icon to represent 1 "Save" 
function. 

Figure 2 II shows a row of icons th.it were c.ipt ured and altered tVum it li.ierl welhiLe. Til lids 
case, the icons Were included on labs. Clicking one of the tabs displayed a Set of CoJltJok for 
-elfLtmg or eniermg inlonnatjon such as .= destination uty or departure date. ^ee il mu can 
figure out 1 he* meaning of each of the icons shown. 

When you have made a guess at each of the icons, look at Figure 2 - 12 . which shows jno the 
tefl labels that correspond to each icon on the tabs. How many of the icons were you able 10 
accurately guess? 

I mills. look a t Figuic 2 -1 -T which shows the Combi nation of icons and labels, as lhe v were dis¬ 
played on ihc websilc. 

Whai uliifrijiiyns C4ii you make about these three figures? The icons, as shown in Figure 2 - 
I ii dii a reasonably good 10b by Ihemselvrs or suggesting (heir meaning Most people who 
were visiting this travel site would he a hie to figure our what most of these icons mean. One 
exception is that you might Tint think to click lhe car icon lo access rail cplions. A nut her 
exiDeplion is lhe Iasi icon, tile Deals icon, which is mure dtlfkull lo decipher. Tile combination 
j cIi.jl i. and m exclamation point does jioi immediately suggest us meaning. Some might 
, ir- Inde th.n ir has something to do with being lale. Actually, n ^ supposed 10 con note “last 
minute." Since nioit people associate denis with saving money; perhaps showing a crossed- Out 
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and reduced duller iuwoum would have worked belter The point Is, as good as l hey ire, the 
icons in Figure 2-11 si ill are mri sulficietil Eo convey tlsdr full niuniiljt 

There are other factors to consider when judging (he usability ol icons a loner. for example, if 
the site is intended for use outside the United Slates, will ihe symbols have the same meaning 
for people of ilitTfrem culture* and backgrounds? Most Americans associate a iMlm tree ivith 
a vacation, but wltal lEi i IropLLill resiilciHs jlsstX'iiltU tv ii -1 Ihis symbol? 

Whuf about the text-Ullly libds in figure 2-12? They do j bctln mb of iiuUealmg their 1 lux 
tion than the icons. Notice haw much more quickly we can road and understand j text fatal 
than we can look ar an icon, even a wnHI-dinsen cme, and decipher its meaning. Reading j t«i 
label in almost always faster The clarity comes at a price, however. The tfift labels look C|Llite 
dry and Ltn ink-resting compiled to tJw tabs with lcom. 1Uieuis generally wm.ni their site in be 
visually attractive and compelling, Musi would not be &aLisfied with such a spare lrealmenl as 
shown in figure 2-12. 

The combination of icons and lexl lalwls shown, in figure 2-13 offers l he bed combimtioEi oi 
clarilv mod visual Lntrrcsl The icons are pleasing Us I hi' eye, arid the text labels enahle tiist 
interpretation. 
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Feedback 

'iAhcri vou step into an elevator and push the buiion tlui LoriGspoiids u> sour destination 
floor, the button you press often glows. The light senes an feedback, which is information dull 
the svsicm pmvides to a user ih»r indicates the Plains of her action, When you press ihe hut- 
ton it’ll ihe de ealof, the hulton'h glow tdls you ilu I your b niton press hits royisi ltli! with tin- 
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■* " ■i - i--utm '! 'Vsiem What happens when y» i push .= Iluor button and •* i. u -1 In n 
up? Mom id us usually push il -i^inin. VVe expect feedback and we often Mi eve ihai * system 
i* no! operating properly when Iced hack is ;il*tenl. 

Fcdhul in multimedia and wcbsilc design l-iikcs many liirnt^. One example is in W*h*it? 
hyper Inikn. whkli are sltorL sesCiunsof underlined icsl (hat ihc iim. r dicks In display .■ new 
p.ipL- h lexl :v. l( uni. image, or other dement. When you roll the jiujusc cursor over a hyperlink, 
the cursor usually changes to a hand wilh a pointing linger The pointing iingtT Cjratr gives 
•-II II ill' i.f ■ I.r rl i, %i i-iin he clicked Browsersprovide further feedbackby displaying ihc 
uniform feuturte locator (URL) address of lhe ditkaMe element Jown in the slants bar. 

Likewise, when you mil rhe m<m» uirsor out a button in many wdMilH and multi media 
software, the builti il s uppeaiaike may change shgjuly li tiny lake on. a >1) effect that makes 
appear o in to Heel ■ ■ i 11 - - ■<• U : button culorMTiay change It s elkcl w tilled (Unt 

ami it provides fmlhiid that the button is ,irlivc- ami that clicking il will perform Ktmc func¬ 
tion. Von can w example* of glow in the toolbar hotlons of most browsers and application 
programs. 

Feedback t-.ni lie audible as well as visible. The tilth ihal you hear when you press -down on U 
mouse button is no in ulnu. [| is designed to provide feedback that you have pushed. rhe but- 
ion sufficiently far lo send the corresponding message to the software. 

because it often lakes more than a few seconds to process a user’s request, applications and 
opertitin^ sv-.term often change rlie <ursor loan hourglasssymbol to indicate that the system 
is Ihi.si (Inis ihis provide <ldr<|iiil1e Frcilhiick? The answer depends on the length of the delay 
heltvCrii when rlu' .Il (|im 1 is imii,iietl and when il is complete, for delays of pol a couple n| 
seconds, the hourglass symbol works Bint, especially il it is animated 1,0 shon th^t the system 
is still operating. 

If the delay is longer Elian a lew second use a different strategy. Have the software eximiate 
ihe time remaining .md display ihal to the user. You C,1tt also display jn animated progress 
indkator (O show tlie opera,t umis progress toward completion - 

Figure 2-14 showt ihe progress indicators usv.J by Maildard commercial .software installer. 
The inslaUef shows multiple progress lurs that are intended to give users more ml or mat toll 
about the installation process. S'hftc additional bars cause more confusion than clarity, how. 
ever. The single horirirntal bar with the completion pera-magr :iTid name of the file current¬ 
ly being copied is sufficient to Utility tlw necessary information. 

The user's cipeclatinn is that when ,i tingle Imri/ontal progress bar if completely tilled, then 
ih<- imk is complete 1 he progress Ei.irs iri some applications violate this expectation.. They fill 
up the horizontal bar, ihen show an empty bar and. begin filling it up, repeating this process 
for each step in the la.sk. I his leaves the user reeling deceived and Wlltl I1i> idea how dose ihc 
task is to Completion. 
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mi Hub .ur iiL ilial i util !ui jil 
.-i J '-v.i -si. Iho hcin/nnl-ii ;nngrit v, 
ndicator in th-^ canter provides 
useful mFoflWHitm, EhhI. xti< watfi- 

cal ban on ih* left ms causing 

anu pE'Ud y adumJanL 


\wh applicantm* have i more diimuLi time display ini- meaningful progress indicators, This 
is because the progress rate may be tied to factors such as server traffic .irul i in:- users connec¬ 
tion speed. We Ihivt jll wen indicator*. lKm remain fixed al about 10% completion for a long 
time, Junl an wt begin to wemry dial die system is hung, Ihc indicator iumps in a single bound 
io completion. Perhaps tulure technology innova!ions ml give us bettor ways of pre¬ 
dicting and displaying progress ^l;leli> i ntormat Lon. 

In the meantime, look for simple ways to give users status information to increase! heir com¬ 
fort mill ilie software or website. 


Affordance 


Donald Norman usti tin lam jiffniJtfiCC to deSCfibe the perceived function of flfl object, 
based on our cultural undemanding of that object. For example, we know dial buttons are tui 
poshing, knobs are for turning, switches are for flicking,, and strings are for pul ling. We have 
learned these conventions through repealed afWBt and use, When ii|’|>n>achiiif ,i d«w with 
a vortical I v oriented handle, we jhuitu' ilia I wv J|e supposed to grab the handle and pull. If 
uc see a horizontal bar across ihc Jour, we assume tJut we should push it. 


Note that the obicct iisdi mas give us dues as tu m operation, lntt 
don’t conftiw ibai with its dftmisntt, If we all had learned tram an 
t,ii‘lv ,ij;v that you rub your rmse against i JiKirknoh to open a door, 
I lien llidl it exactly wM Wt would expect whenever we saw * door* 
knob, Practically speaking, though, it well-designed cnniml Joes givens 
l lines about its purpose. The concave sha|v of a button face H\‘tm to 
invite the touch of cmr finger. As usual, form follows function. 

Designer* quickly get into t rouhle when ihey ignore or violate al'tor- 
djiKe convention*. lb users of websites nod rmiliimedia snftwnrv, if a 



When you ere displaying pages 
in sequential order, give your 
mi-ais Feedback about where 
they arm in The sequence. Instead 
ul displaying Pegu 4, display 
Page 4 of t. Otherwise your users 
wont know if there are 4 or 1{J4 
pages remaining to he viewed 
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.-jniiol luuks l.kf si LKilCkUl, is Il.nl htiU:r sii-t kkc- oik! Um:i> ak \ucl U Lu llih(u^I 
wht:ii ihty ecsa^iiter something ihai looks msf like 9 imirarsalh- ^c^pted tuntmL 
but operates dal’feix'nr! 

For cx.impk. Figure 1 2-1^, bumnwi'd rmm j difUTL-m ir^vel wehkite Than our earlier 
sample, Mi ms lo prov ide users wi’tli various eoulrxds for com paring prices Oil 
hotels* rental Lurs, and Airline liekeSi. I'here .ire test lvoxes for typing eicy names and 
dropdown lisls for sdectmg dejwiurt jnd return dales. In ihis case* however, 
<n-s deu-r. I:. I-II. JORli ds .HI:-I :--r «T.dh o -ntTPiU—They arc all pari ul 
-i sangk- irtiii-Rf. When ymi clkk mi one of ihe “coralrols* it links to n dilferenl page 
insietid of behaving as es-petted Such deception cjumts users lo <|juiddy lose conii- 
dejiee in the sure, In this example, eilher ike conifuls should be true, active control 
or iktM entire image eoiild have hem replaced ivkh a "Ciontpare Prices’ [exl Or graph¬ 
ic lint- 


FITTS' LAW 

Rud M. Flits Conducted «Jily Upcfiilbriils (around 1^54) dial Jed to our current 
undent and iriji ■)] peoples ability to select tarots umshij. a mouse or ml her pointing 
dnief. In one tiqpGrinKnr. Fitts had hit subjects quickly tap a center metal plate 
while avoiding tapping the plate* that flunked it on either side. In other experiments, 
fins’ subject quickly nuntJ rings, front one peg lo another or fit pegs into various¬ 
ly positioned holes. 

Fins' l.uw states i-b.ji ihe tune ii lakes to reach a ratt!ei depends on the distance and 
sireof that taijict I'sers. hive more diltkuliy pointing to small ohiecis that are lar 
away from the current position. Designer* of user interfaces use Fitts' 3.aw to size and 
position obnn i % muh iis button!. so ihal llicv can bn located and clicked quicklv and 
easily. 


InlcfL-sriri^U. | III.- lour edges of the viewing screen are considers J very large target 
objects, since the user cannot move the mouse cursor past them (unless ihc user has two or 
more monitors configured on his system i. The Apple Macintosh computer rakes, great advan- 
Uge of the largeness cd tht screen edges by butting ihe menu* of the currently selected win 
dnw against the tup nlgeuf the screen, figure 2-IS shows hi»w ihe menu is pusiiioned direct¬ 
ly .ij^unsl tlur upper screen boundary. 


Hu u*cr 4,it» move the mouse tuftmr very rapidh to ihls target, knowing that llie cursor will 
*top ^Utomatkafly when it hits the screen edge. I n operating systems that position the title bar 
m the (op edge of the screen and the menii bar directly bduw ir, the user must be much more 
precise The rilou^ 1 curuir must cilhcrbe slowed down vn ihal il does nu| fly past ihedtsirpd 
menu, or il inns! \v moved lo the lop edge, then sfid luck down to precisely hit the target. 
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Flits t.aw also tells, in that larger buttons are I’asior to locate than m-iller min. Wc stated |ire 
viously ihit btiuoite ilwt toitiiin text labels and icons are usually emier lo use than buttons 
tji.il am Min only icnn>. Ih'sides Ljc i ill; more understandable to users,. iJieir Lnjser SLBe makes 
them an easier target to locate with the mouse. 

Hurl her research has heen conducted to sliuij,' l he lime it takes users to reach targets. A study 
performed by Thomas Whisenaml Jint Henry F.murun ,it the University of M.irvLiml suggests 
that the ]MWjjl|[HSi of a forget relative to I lie l. ul'ielU L.U|'SL)1 poedtion is also important- Users ojji 
most easily move tJie mouse cursor linriaojiialb trout the current position. Moving 10 the 
right is more thin moving to the left, Next in efficiency is moving straight down¬ 

wards. In general upward moves are slower than downward ones. Diagonal moves, anr gener¬ 
ally slower Lli-iiri horizontal or yerlical tines. Figure 1 I" illllstrahs sfnis point- 



mi 



217 


£jcjll:: 'll Si jnd jqEt J tly 1 nMIBK W^pBC^U lid U id 

Utility firiipvjn ihwthic iii*rn taett-t* luignii fitw 
rnw nq :”n mm. ill igr.'nrsn y pr ricrdvrwflud 
man who n mifiinp Ihe upward 


Hr.rv%% 


K¥~wr Ai ■ 

























40 


the irl -it iJungming b^uamii skMingi 


Dinners can u&cthK inlnrnurion when posiuonj iirg elements thal arclreqp^ntly mco^^dm 
inquire For exjmptei position narif^liuilal Corlirrtk that mom backward flnd forward 

Ehrmipti uM-nCcni H \hv hsiUom >f th * 1 screen rather th.m nuking them pail. of ihe imlfrar -if 
the; lop of the itrrtn, 'Jhcj. will beefier to lind, since ilie locilbtii usually amlrim olher bul- 
um% ' I hey wilUlno require Eess time to locale, siJKe the uncr will rwpvelhi: mouse cursor down 
r.ilhrr ch.m up to point to them. 


CONSISTENCY 

CloiiM^lciKy mean* doing l ht wine ihiiigs the same way. apply LtiniLiitju-y to ihe 

user imeriike co promote familiarity with the software or wdhshe, Confirm design*. increase 
users' comfort .allowing i hem to focus. on iheir work rather than the interface. Users of appli¬ 
cation software learn th.il the Saw command is always in rln 1 File pulldown menu, and That a 
paxtkuli.ii sLt| lil-hl e of ItL'V'i holds (lie selected icsi. These ia invent ion s Apply m virtually .til 
.sppiK jlion.%, M» users don't have: to relearn haiit fu m Lions each lime they use a new ox dilkr 
ent application. Web hr<ywsn-5 provide a omsislcni set of functions, such as ihe Hack and 
forward hnirons. which work on most websites. 

tinod designers ,tpply consistency wherever possible within a multimedia software program 
cir welwitc. For eyiiflr, loolhars, menus, and content areas occupy l he same location on fttth 
screen or page, A pm Titular coin rot, such ass menu button, maintains the vuuc look and loca¬ 
tion on each screen that n is displayed, Thedesigner decides which lotus will be used for titles, 
headings, general text, button captions, etc., and applies those conventions throughout the* 
design. 

Consistency applies lo the software's operation as well as its appc.ir.inee. ( "Licking the same 
hullon performs l he same function throughout the software. If I he designer calls for a partic¬ 
ular animation technique to display menu ilenti, lhal u-Jirtkpu- is applied whenever immi 
Hems are displayed. 

Some software developers make ihe mistake of trying to apply consistency late in the coding 
stage. Programmer* sometimes behree that they must create the functional code lirsi and 
lt;iw ’‘cwnwtk” changes, for the end- Thin approach frinpienlly resulh in a product lhat is 
int iiiMsleiit and perceived js ladling in qu.ifitv It also imposes UtinneiuTv burdens oil 
ever yortc involved ui the dr\ d ■ ipilKIlt prQCSSS. 

for example, the designer will watfc tune debating With the programmer (if they are di fferent 
people i whidl conventions can he applied mid which will require toil nittdi programming 
el I or I. betiiBC of the way I he screens H'U pages have been ended The programmer will recode 
many sections Hi make tinm ^insistent, pi itviM rally ininidudiigerrors and certainly dupJit-'i 
in£ work. The graphic jun may have lit recreate buttons and other graphic dements lo nulch 
other dements. IJuaiil l .lsmii .mcc engineersor Sufi wane testers will s|»e[id significant lime Ln 
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mg to find every instance of text that ii in the wrong Font nr slvlc. Thin need tu focus nn CM 
Jiisteney issues may prevent them fruin finding more tiignilkaiLt men m the software or siie. 

'Hie ttoM n> determining style And operation conventions is as soon as the fundioiy] 
requireiLienii ace uiidtntowi Yon can and should nuke tmaro of these decisions lieli.ire you 
si^rt designing individual screens nr paves i re.ite i style guide, "inch is document that 
defines the style conventions that "ill guide I lie design and dcvckjpnlcn L of the software, See 
Chapter 12 Is<r a dlMUliioil uf Style guides. Distribute the style guide to every on l- on tin: devel- 
optnem team ami make sure they follow it! 

Website designers and developers an Like ad vantage -'I cascading style sheets (t Sbl, winch 
arc collections of instructions that specify display elements such as fonts, font toes, font coi¬ 
tus, background col ore, ,1 nd images to a Web browser. Cascading style sheets can also control 
iln- puMiuuiiiigid .i'li’iiiniison the page, They hdp ensure that design<Sotnvcniicms art applied 
consistently throughout the site. A cascading style sheet can he set up as a separate URL, father 
than including it within the HTML code for a page, Radi page th.it uses th?t style sheet con¬ 
tains o reference tu the style sheets URL, A change nude tn the style sheet is Mien uulcMilali 
cally reflected in all pages that refer Hi that style sheeL 

Multimedia software designers can apply cOllVoULolls umriMih Jawh j 4 i' .\l w~h -.vi I>m:o I- 
their designs, hut example,users know ihal underlined text thaE is colored Ji JTereiltly from the 
surrounding lent is a hyperlink. Users have come to understand and expect thi.c convention 
regardless uf whether it is used in a website or in multimedia software. Fur the same reason, 
conscientious designers HOW ax-ukl using colored, underlined text ax a non linked heading 
si vie, since users an 1 likely to irt unsuccessfully to click it. 


FORGIVENESS 

Suit wart’ should be designed to help keep USAS from making serious mistakes, and it should 
help tlion l recover I rum the niLstakes lltey make. SuJl software promotes forgiveness. 
Implementing forgiveness features, such as an to-sax ing documents, can help ensure that users 
don’t lose work because they Forgot In explicitly save their document. 

Most people who do g lot of their work on computers have beamed to save their work con¬ 
stantly, often several times per mi lliile. Although this sounds excessive, must tlf US have 
learned through misfortune that it imio turl tu Jwve Uj recreate even a mull amount uiwurk. 

When we write or draw on paper with pencil or ink, urn. noi k b. ■. 1 1 * ■ iiatiuilly saved, U'l- Joii'i 
have to worry about the prim t|uickh Fading from the paper if we don't manually save tt. Uv 
can devote all of our energies tn the creation of our work. 

A handheld device's operating system, such as ihe P.ihn, combines features of computers ami 
^per and pencil. It save* work js the user creates it,, rather than requiring manual wves. Vou 
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l iLji Lit in I he middle of k rc-it lug a tjk- 4 iHt.tr entry when you turn till 
vuur Palm, When you power it back ups Ll displays the screen you laxL 
accessed, wi-th .ill of yottr information saved. Ill addition lo being fbr- 
givinjt, this feature allnsws users to concentrate on ibeiT work instead of 
Oil the process nf wing. 

Allowing liters ti> easily recover from their miNiiikcs pm other divb 
dejuls as well, li' we provide a means I Iir Users to recover accidentally 
deleted items and documents* then we don't have to design in all of 
tho^c co n Hrm.it ion dialogs i ha i can slow user^. down. Messages such as 
“Are you sure you wish to delete this'" could he a ihing ol llir piM. 

The design of many commercial websites fails to adequately lake for- 
. o in -. 11 - . . il I'ii - . n i - o '. -O i.Uvi In! Mle- ll'..U ■ M! . i 

goods tor salt 1 . For example, online shoppers usually w an t to know the 
shipping klists lor their items before committing lo a pyrehaje'. Many sites, however, don'i 
make it dear that Ihe shopper will he able to review the lota] price for the order, including 
shipping, prior to Committing to ihe purth.isc Tin c users rtlav prefer to -ibnrl the purchase 
rather lliail risk being. chargLil loi ituuls tli.it lliey don't want due to high shipping charges. 

It should lie. in k'd that lltu vast iiujorih of these sites were not clurgi iig users excessive ship 
ptng goste. Il was only ihv fear I bat these tosli would not tic revealed until it W.is luu Jale !o 
cancel the order that m-ide users abandon their purchase*. 

As one of the first large, online shopping sites, Amazon-com had to develop design strategies 
to deal with hesitant shojifier* such as this., many who doubted Thai they would be sent 

the items they purebuied. Toe jw shnpp; ■. .. r, .1 j-u i.ii.iul-. u- lining man on line pur* 

chase, Amazon displayed the message, "L>on't worry.you can caned it later."This simple addi- 
lion helped increase sales hv building users confidence in the sue. Even today, Amazon 
Tenifids its customers when lhev are placing; items in I he ‘■hopping k.irt th.it thev c.in remove 
them later. 

I'mglwuecs can also he applied to the menu items or navigational lAituiri of a software pm 
grain website. Some software is Ml dij'licuSl to navigate tii.it usei^ .ire discouraged from ever 
deviating from die path Llut leads to the completion ot their task. 


TIP 


tylake it easy lui users to home 
out how to navigate to h r: y 
screen or page oi The software or 
site Thf?n male# it easy for them 
To n»ftim tP a knawn IpcBtiun nr 
system stale. This w<H enc&uiag'C 
them to e*i)lpr* ihe soli wart:, 
gaming expo nano a and taking 
advantage ot all that it has to 
offer. 


MINIMALISM 

Minimalism is .1 term adopted from movements in art and music, lo user interface design 1 
minimalism can lie defined .ls a deliberate reduction in complexity for the User s benefit. Less 
is more. Taken Literally, it means dim muting everything from the software nr website that isn’t 
ibsoi u lulv essent i.l! . 
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When designing interactivity nuiimi?£ the number of dicks the user must make to uompletc 
a given task. IWi R’t]iiinc two dicks of the mouse if the fink c.in he accomplished in one. 
3\in I to*.| ii [tt the user to wroll to gel to the impmUnl informal tun un .1 particular page or 
screen. Use one-dick eon t rob whenever practical. Red me the amou m of d i»ui 11 a- r I ■,. ■ 1 1 ■ ■ 
must jiKivc to access the most often-used controls, 

Lor screen design, consider llie adi ice of hdw.iml I’ulie, the renowned information designer 
and Vale Professor Emeritus. in his classic hook, TTte Vfciurf tiispiny af Quantitative hip r- 
malion (Graphics S ] iesN iufie recommends el i mi mil Lng graphic clullci 111 Get, removing 
every single pixel Umc isn't used id convey itcoesHaiy information. Although suJt visual 
extremism runs counter to the instincts of many graphic designers and wishes of many clients, 
the point is dear and valid: when designing the visual display, reduce decorative embellish¬ 
ments. Let the information (oil theslory mild allow visual dements Lo accent rather than over 
whelm. 



PRINCIPLES 


As you work on your own designs, you wiEI quickly rc.iLi/c that the design principles often 
conflict with one another. I 11 trying to he nnuttlenl with other parts of a design, I might cost 
nw LiscT j couple of mouse dicks. Which is mure important,Corisislencn ur iliiilLilulLsillL IhiLti 
situation must be mdged on its own mcrils. When you consider thi- needs of the user tirsr, a 
dear answer usually emerges. The principle thill wills out i- (he <uie lhai makes the software 
Of website easier Lo understand and more efficient Lo use. When we sacrifice one principle fur 
another, we Jo so with eyes, and minds wide open- 

tor example. Jets say we .ire designing the sellings page fur a com pie.', Web application. s .Vc 
must accommodate two types of settings. There itr settings lhai are commonly used and 
“advanced” settings that are used much lees frequently, hut must still he included. 

The principle nf visibility might influCTKv us in keep all control* visible cm tin vime page Tills 
Will ensure that users will sec tlKin when they access the seltingc page. 'ITie principle of min¬ 
imalism might sejid us in two amLradiaory directions. On one hand, we will minitniie screen 
clutter if we remove the rarely used settings and make them accessible by die king an Advanced 
Settings button Hn 1 he other kind, we will force user* to make an extra lick to .uwss these 
seftingi. 

In t his case, the fact that the settings are rarely needed tips Hie scales cl r,irb ii: fitvnruf mimv 
mg the advanced setting from the normal setting* screen and requiring a button click to 
access them, I ic Millings section nl the software will be much easier for new users to learn 
and advanced users wrni'f he unduly penalised by I hr required extra click. 


SUMMARY OF KEY POINTS 

* There is always more than one approach 10 a design pros tern. Si ad by rhinkunq about how you 
might solve the problem without a compute I 

* Refine your original Bpprga eh by thinking ahoui how it tan he si m pi ifie d or minimized Try to elim- 
iimie or combine efemortis. Sunk an up preach that iihu.va the usei lu concentrate on the 1 ask at 
hand rather than the user interface. 

* In desiij ii, form fallows 1 unction. The du si gear most not a ciuPipt to define whal the softwa re will 
look like until he understands fha functionality audience, and delivery environment. 

< A design's vtsthttityis a muatuia at how uusily usei s can sue and access thu functions the soft- 
ware offers. 

* Pay parti tu lar a nan rion io the mappu ig of the software s va i mu s interlace controls a nd eta marws 
ed (tie associated functionality Good mapping allows users to concentrate on the task at hand, 
while mo interface- becomes invisible 

+ Use feedback to provide information to users about the status of their actions. 

■ RusyuLMliu M\Qtd-atictf of die vaiibus controls you ti$e. In gonorol, if fl luoks like - button, make 
sure it acts like one. 

* frffs Law and i elated researcii gives us dues about hjw ig position conugJs so that ihe user 
can locate thorn with the mousa quickly and accuratelv 

* Apply consistency tfvuughwrt youi desigi m allow us-ers- [g become familiar and comfortable 
with your software’s layout, lock, and o pa ration 

* Design your software- with forstv&ness m allow users to easily recover from mistakes and free 
them tram the btirdon of confirming everything ihey do 

* Practice mn/maiistn by a imitianng unneeded (pntiQls,words, graphic embellishments, andu&er 
clicks Simplify you-' designs ns much nt passible 

* When design principles contradict eachoihei, choose the option that allows users ta learn and 
use (ha software most easily and efficiently. 
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‘. Name ana advamage and disadvantage of a minimalist da^gn approach, 

. Cofine thp tFirms visibility, feedback, and napping 

What iwu factors diEiarmin a the lima il takes to hil a target, according Co Fins' Law* 

According to Wlusenarml and Emunan. moving iho mouse cursor is easiest in which 
direction from the current position? 

■ Providing a means for users lo njcover a documenc after a power fain re or system 
ci fril l is an example of what daeigri principle* 


exercises 


Recall that a perceived affordancy is the set ef functions tin object sduifih Co offer 
by ns appuarencn I nua mil* that you liuve bean comnnss orrud to create The House 
of ill Afford an ca.' In this house, objects that loo* normal are designed! to tool the 
user by operating in an unexpected manner. LI escribe your House ol III Affordance 

2. light switches in buildings often employ bed mapping. It is difficult to tell which 
switches control which lights Design a now kind of switch plaits or switch mecha- 
iism tha: solves this problem. Describe Che pros end cons nl v-ir - u u i 
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l"ie user interface design process 














































objectives 


Sjj.iNitiAiim Hie mu tans Iim adhering Is a u*ei intuHncu di .iifn pucew 

Examine •% Slop* el ilif Wailn-rfflll ifowlhfHiiri.t mitrli‘1 

Exantlni Hie ships ai lire Repealing W.Hcrliilt dtevcl upRieifl model 

Examine the fillips af Hie Spiral deyittapititrni model 

Desrrilie Hur rriitracwrHtfin&af agile software rinuftlapinn ni imrt|aiiild|.!ijir* 

Analyte which development models wOik licst irt which i; ire unis lances. 



Once you'vt bean hired to develop the user interlace for a website nr multimedia software project, 
it's time to degm the impnnand |ob «F planning and orgeiniing your rtork Haw w you ensure that 
the website you iSes^yn niuirts your diem's needs? Hurt will you keep the pruiect nn hack so lhai yu .1 
complete it in a timely Fashion 1, How can you be lure thet your design includes all of the nocBssary 
functionality? 

Successful websn* and software designers and developers lev low a process that guides itwr won 
□n all projects, large or small. The Type uF pioCaad used depends on Ihu scape of the wark, the 


chant's understanding ol theii own needs, rhe stfa and experience level ol the development team, 
and other lectors 

A large, complex, website or muftimadta suftwara project requires a more rigorous des-gn ji J 
development process than a small, snnplv praiacE. Tlnr process mi uroseui ip this chapiw are 
designed to accommaiSatl* a mnge rtf proiecls including rhe mo-I complex aniiF you are likely la 
lace Time end experience win help you deternufle which process best fits each project 

The process oF designing Unr interlace is pan of lire larger praness ::f ilftveloping the sellwine or 
website Many software dnvoloivmont methodologies have emerpnrf over the years, hul they store 
(tie same goal—til produce ijinLiional seftware in a tumefy menne* 
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WHY HAVE A PROCESS? 

Bui ichv luve .4 pT«u-i A -I ill .•s.jv. I • n i ,'i; -• n.11 >n(' '■ '> nr f tnl ■ iwin . a pnKttf 

i u \t llIlI time uml mjiii plcsil y to the cicvch ipmc 11 1 ol 1 lie m "l l wi re it site? Would nft il hr quid 4 
h;i .iiii ,1 ilJ’.l III lei I lie designer do whaL come* 11 il! limJK ? 

In IjiI, adhering Lo an interface pMtHs uwdriably uvua the designer <i»(l devdoper lime,, 

mriiiej, anti effort, li also incffases the likelihood ils.n y<m ia- ill create j sucueiisl'iil] end prod 
tact, one that meets ihe functional and usability requirements of its audience and iKc budget¬ 
ary and scheduling need'- «-■ I vnurtlit’lU. Here are '■fime reasons why a proi;csi is, esscnri.il 


\\ Increases Efficiency 

l ulluvmJiL, ,i iLm-llm |"n.h_L' hrlps li^lii l LiuL vuu pi'ilmnl jIJ df tin . ■-.■ lljICiI Lj\k^ in tin 
pmpui.■jetltaciKL. 1 C )\m perform Uhkboul til'^queiivc. lIicil ihm niLojiiliLjimI Jiu^tLnl Elm tudi 
task is likely in W inccmpleic nr missing r^uhing in i:h- tiniioCHsary rcpfiinion nf ihrwc 
taski. For example, the processes we will i ntroduce m this chaptercn.lt for the consideration of 
■i n - : ■ r i..«l- i irlv i- l \iy I ■ tU'|* ulllil -Mil i lllv sn! 1 to.Lit- i- il ruli spt-J will ILkdy 
revolt in costly rciH^miAmcui, iiJJilfon, aiul deletion ul'siiwji eleineniM and feature* Lu £it- 
kfy the audience requirements Ad I wring iu the process minimize* the need for constant 
maintenance, iede*i|n,an(i repair o1 iKc finished ptckJllci. 

Designs Created by following tlic pnicess arc bdtirr able ttn ACCOniinodaie iin foreseen dlinia^, 
If I be chan pc is $ mindr Ont k the daign C®tl tiiodk it casiy. Tf file ch.in^ct -ire exteAstv?! pef» 
tap* involving the addition of new (ieiiliires, you will know exactly which step* need Ifl he 
repL-UcJ lii lIil cJungcs. 


TIP 


Keep a “Design Process" lile As 

you work 044 9 proiecG |Ql down 
notes le^erding how well yuur 
pmcess perl nr met! on the proj¬ 
ect. Record any ideas you can 
think of for improving the 
process new time. Be sure to 
iodiido the nami* erf [he prniect 
with your notes, so you can rater 
Lu Ihtiilk il you work on similar 
pickets in ihe Future 


If Produces Consistently Better Results 

Adhering to a process helps ensure than your design is cohesive and 
complete For example, if you aifempt to lay osn ulcmenis on ihc v.ir- 
inu* screens before compiling and organ i ring the soft 4Vii re's functions, 
your layout is likely to olllil, sortie of the functions. When you irv hi 
back-lii those functions into your exist tug design, the results 
Id be haphazard, w ith pieces ihai tksn'l lii lopether well, 

Without a process, you mav ^ct lucky enough to produce ,i u-.aWeweb 
site or software product, hut it is unlikely rhftl >wi will consisleiuly 
achieve Vildl rrsulh I ollowing, ,i pmecss makes HIcCCsv prediclahle. 

You cun Uiilur the process to Hi ujuimuJ sim.tnons, increasing your 
efficient t and likelihood ot success Voti can csamijie Iht- piou^s ihor- 
oughlt over multiple pronvK enlunciiift irs Mrengthsand eliminating 






| CHPUP J | 




irs vffliiknesSL'i. Wifbmu a prucfa, though, there It nothing to examine, nothing io mejmre, 
4 ikL the retire rin «.•- ,i v lo subHU.ntij]ly impiwe ytuir work. 


It Validates ttie User Interface Design function 

Finally, we create and fallow processes for functions that we deem important enough to want 
to Complete successfully, We wouldn't attempt to build buddings, introduce and pass laws, m 
try and convict criminal!, withoul following an icctplcd, rigorously k^cil process. Designers 
wlio follow d process when designing the user interface arc, m effect, ackmuv kd u 111 ji, lli.it itie 
interface is important enough to warrant such attention. 


SOFTWARE DEVELOPMENT PROCESSES 


Tfce Wnturfn i MhJrI Stifir* 


Hopefully, you are convinced th-il it is unwise to begin. ildigtiinj^ or developing a 
website or multimedia software project without basing a proofs io Mluw. ‘1 here 
arc a number of different software development processes, also known as systems 
development methods iSDMs). The dasdt. methodology is known jc tTn- Hyv 
Ceiiih development life cycle S1.H.O model. I Ins metln hLuIliiev includes models 
v. .tli names like the Waterfall, the Spiral, the Fountain, and Synchronize and 
Stabilize. 

Perhaps die oldest software development model is the Waterfall, a step-by-step 
pmccss for cm ah’? mg, planning, designing, (leveloping, and testing software. Once 
the process gets going, like falling water, it flows, forward and never in re verve, 
figure i -1 shews a diagram of the bask steps of the Waterfall moddL these steps 
are explained in further detail below. 

The diem approves the output from each, step, which then serves as the input lor 
the next step. The Waterfall model is the most time-tested methodology for devel¬ 
oping software. Simil.Li to processes used in iiL.nuifn turnip, it works best when 
the requirements are well known at the beginning ot the project, 

The SOLE Waterfall Model 

The Waterfall model consists of the following basic steps: 

l. Project Planning Stage: This sta^e establishes the goals for the software nr 
website. If the software or website already exists and will be enhanced or 
improved. then .irulr/t- the existing system and identify its deficiencies. At this 
*uge, um may speak with the users of the system, mj ppott jwrromu'L manage- 
i ueiit, and other interested stakeholders. This step often iiuluJesjji jiuhdsof 
competing or similar websites or software. 



3-1 


"Hir- Waterfall mnefa! ntaravs 
(lows torwiant The (hMpiifl 
iritin yrtft sn»Li becomes tto 
Ilipul Ul l>j "Itxl ill.-. 1 
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2 . Kwjtlifcment\ l>elimlkm.Stage: Ibis ilvOilck ’Ll' new ^ y^QBlU iw;utrniK‘iUj, includ¬ 

ing .correction* f«r [he deficiencies identified during the first step. Uevelop the feat are set 
tor the iirtrw system, considering such factor* a* the audience, hardware and software oper- 
jimg environ men t. miriiy, nut ihe programming or development environment, 

J. SyMemj, Design Stage: I Lis >LUge desC I'ibes Llie new system Ul detail, [Jcsijifl ihe user inter- 
taie l-csr the iitw system, accommodating the system rcquiteracnLj developed during the 
previous step, 

4. [i ir|■ Il meiLijtioii Sla^c: Hie new systeEii is developed during this SUge, including the CIC 
jiiou ol all pjogramcmU:, graphicaJ elements, and mullimcdia elenwnts, 

' Integral kin a n J Tc m in g 5tft f I Kir i rig ill i ■ i y.i all n f I Iw j e-. e% .i re bmugh 1t< igetli cr and 
lolcd- 

n Installation ;M'il I >f-plnvm(nr si a ire I '* < t i ■!: ■ H", *- in-. -In client ,v. a-pi- 1 -■ ■_■ soli wan* ot 
website, which i& hnmgliL into prodUvLion and rum with live users. 

Main tens nee Stage:1 haring this stage. the Tunning system is evaluated, errors arc fixed, and 
maintenance is performed as netessnry, 

Although many groups irtinlimic to use the Waterfall model and produce excellent results, it 
has LjIEl'ii out of favurwElh some development leant*.'[ hiee valid criticisms of the Waterfall 
n i lt.Ll- 1 are: 

.i. Li., i mocI 'ukkcs (Jit itik "I tlsef■■ ’= \i i[ ■■ ^vJl-irg km. iiu: cji".-. LI --l kjiii lo 
design and build truly u.ser-ceiHe reel software, then the user niusi be a mow integral part 
ot the design and deveksptnent process 

h. rbc model jivumrs that .ill of the r^yjirenierits tor the system ire known in advance. 
Today's realily i* l3i.il project ret]uirements often evolve while the' system U being 
developed, 

. The them dtH'V no! grL Ul --v worlvinji code iinlil relatively Lite in ihe development 
process, i Clients who die unable Ur visualise: the tombed gtnotUaCI h<ml (he document.! 
lion may he in fur an unpleasant surprise wlien [Jll-v Hi tall v nee the software or website. 

One way 1.0 increase Die rule of end users during [lie design and development pkKcs» to lo 
invite them to evaluate the various deliverables along the way. Itaiher than watting to solicit 
user feedback until the syiifm is nearly complete, invite users to evaluate the project plan, 
wireframe diagrams nr wireframes, and «Hjr software builds, 'Hie ntftlll* will help ensure that 
I he finished product meets the needs of tls users 

Ihe Repeating Waterfall Model 

lr a substantial percentage uf Die pmieci rEciunxmcnls cannot be well defined at the protect* 
inception, then a different development strategy or model may lie requitad. Some tains use 
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.i variation of the Waterfall, in which the stages hepjlining with 
(lie systems design vkigc-itkl prtKCeding through ihe LHlL'grjlujil 
jiuL Ldsisnjj suge arc repeated lor each group of lectures as they 
are approved for inclusion in Ate project- The project is thus 
handled as a series nf small waterfalls. A diagram of (his vana- 
liojl is bhuWn ill Figure 3-1 


Figure 



The HcpBamig WatarFuH modus hsndleS cn pu 
ing requirement', l)Y ni(i*OUilfl ihe ayItems 
design. iwpleiueniHlion. anrf irmigMdsn =niit 
tesr-r-r; srAiiiq. ptsch grnup of new Feetur^s. 

Tit* RtpMlMiiJ WaldrTmi Ml-, rtf,I 


The Spiral Model 


Pmect Panring 


An L-tiL-imon or ihd Repeating Wateri-all model is the Spiral 
model. This model* far^S introdneed in the by fkm-y 

Boehm -ind discussed bv Roger Pressman in his book, SvftwtW 
Engittixring: A PfW.ntinntv's Appn* il* (McGillr-Hdl, 200 ] l, is 
represented .ts a spiml-shapedl line ib«rt passes a* many times a* 
necessary through planning* rink devdopmem^nd 

fix'iib iL’k ilj.gcs.Thi 1 (Irsl couple i if kips around the diagram may 
pndiR'e a product specifkitiufi or AiiKtHning pr{rtoly|K, 
Sub#«|utnE bps cep resent features that arc added |o ihe cmer^ 
^software. Figure 3-3 shows a diagram of the Spiral model. 


Til* SfHr?! Mortal 


Rawing 


Rjgfe A^alyns 




i f_- 

Macflimano* 

SLw 


3^3 


CarfflraEBcm 


Oflnl 


ri y Sr ii si moriE- recrespRls riavalupinQiiiS 3S 5 
spiral shaped line Ehal passes repeated^ 
thrash sjx^.m-hmi-^ si development sLugra 
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The stages of ihe Sjvjr;tl moetd Jit." 

1. (Hunt (]ommuiilealion: Establish effective com (Nil trie alum hiHvcen the development 

Lcllii] and (Ik client 

1 . Planning IVfirlt and schedule and budget CWIrtninK analyze audience and 

other project fetors 

>. Kisl Analysis: the technical jud mu i lavement risks 

a. I.ii filter ting: HiuLil one or more representations of the software 

5, Construction: Omstruct. uilegrate. Lest. and insult [lie hvsleill, and provide user support 

c. t IHiiriit Evalunliom Ohlaju chenl feeslhack based on evaluation ni Hu sofl wjh created dur 
Lug the engineering stage arid iittpk'irivriK.'d clui ■■■;: nisr,|IL|lnin 

A linutjLsi.nl of lire Spiral nlndcl fruni a user Interface design perspective Ls that, although it 
jn-i.1 u-ilcs a planning stage. it does nol provide adequate) <- Lor a Cohesive user interface design 
tor thcsvslcm as a whole. This topic tsdiscusMMJ lurther during 1 he diisc«.i s^icpiI ol agile devel¬ 
opment methodologies, below 

An iilterniitive to the IVjhrl'.ill model and its variants ,irc the nw.ilM spile software dev*l- 
opmenl jii*-iho JoWis These aregaining popularity in situations requhmg more fk.sLtnliiy 
during rhe sksLgii -uni dvvdopnKiu pi'iM-sh. ^g<h .o when the ivquiieiiu-nilh .til- IIIII well 
known at the beginning of the protect, Wll lake a closer look at the benefits and liabilities of 
these emerging methodologies 

Agile Software Development 

Agile software development methodologies, which include models such as extreme 
Programming (XPj. Adaptive Software 1 Vvelopment. Scrum, and (.Tvvtah use an ileralivL- 
I repealing ) approach. ilio is m contrast tn a linear, lep-hv-s-Lcji appnkjJi such as the 
WaleriaJl. I sing agile methods, the development leant designs, creoles., resis., presents, and 
motlilies ,i series of quick prototype* Once the client approves each pmlotype. ii O ruleytat- 
ed in Lit lhe protect. 

Till’ agile imthodolrgirc emphasize verbal communications wiili lllr development I cam and 
client instead of tomul vpcfHicatioii.s, In eXtremc I'mgui Inning- the coders 1 l,uii up in 
pairs—one person does the jeliinl codipg while the Other reviews the work, asking questions 
anil making suggestions lor revising the Cdding approach as needed. The user analysis takes 
ihc form gfvKT ’Siorie*,’’ which are requirement £ cap lured in ihc users' own words. These 
user stories form the I -1 i for , a in idling development time and determining what goes into 
cji.Ii release. 
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Agile technique* are in eroded for situations where cither i hie project requirements or the tech- 
rm logy 11 sed in development is nol well known 1 1 r evoking. They arc also used when I he diem 
ts not sure if tlur project will he approved liir full development. .Agile methodologies require 
chji at least M>mc of tire developers un the learn have significant pmiect experience. 

Here jre i he b^sk steps of agile juft^-ire development methodologies: 

l. During the require me Lift-definition phase, the clienl gives the development group whatev¬ 
er information as known abom the functionality and requirements. 

2 - Establish art overall design for lire protect. Dining, the development eyek h Ihe design will he 
modified iteratively, with rnorc detail and modifications made a* necessary. 

Develop working prototypes that relied the emerging design, using the program mi ng Un - 
gLuge or development environment. 

4. Submit the working prototype to ihe clienl fee suggestions and modifications. 

5. Revise the prototype to reflect ihe client s changes. 

6. Repeal steps 3 through 5 tor additional park nl the system, modifying .is necessary and 
integraliilg with the project ,i - □ whole. 

Some software engineers have embraced agile methodologies because they want In gel work 
Lug software into Lite hands of clients as Soon us possihJe. I lie xigumrol goes something like 
this; If the client is going lo be changing ihr requirements anyway, why not trade up-front 
planning and documentation for quick code delivery and a culture that embraces rather than 
fights client changes. 

Such flexibility comes at a price,, however. The Waterfall model allow* for ihe creation of a 
cohesive user inter face design that can be applied ourlsi sternly throughout the boflware or 
website, when features must be changed, added, or deleted, the designer can refer to the wire¬ 
frames to determine how to make the revisions while maintaining the cohesiveness of rhe 
overall design. By Centrist, the agile development methodologies cm phasin' smaller hurtk ol 
design, development, testing, and diem comment, Such ail environment makes it more diffi¬ 
cult to establish and adhere to an overall design vision. 

J |[use EWO methodologies have advantages and disadvantages which roust be weighed. care* 
fully Rather than make a blanket recommendation of one method over another, ii is more 
useful to see how each methodology relates io factors lhai arc common to the design and 
development of a Wcbsileor software piujKl. Table 3- L analyzes import uni cJuTKteri si io of 
each of these two methodologies. 


5 k 


| tii- s£fc • e M i-g- p * J 




3-1 If. I I* . J L |Ei{d lEl <i 111 ,.«’d Agllir ri.-lliwh: igir 


ITEM 

WATERFALL MODEL 

AGILE METHODOLOGIES 

Frwtur* Ptr hfct FtMiprus m b« 
mclyiisd in ihf wetarfr or 
software] 

tips. suited when H»r features are 

Inowm piior w (wcimiHitg design 
aJiu dmretoplmSrtl 

Bast sn-lnd wFien feature set >\ nuf 

Fully known arut will be detemtonefl 
during development 

Cuinnuiii iciti itn ol prraiacl 
iptfcHiciEiraii-E 

flukes IhtJ-Hvil^r un prap-LM baatid 
docuiraflntoiwfi, deluding laatura 
i| jl-l i^icuciuns and uisr intrarlacra 
diuifln ilLrfi^njiliciins 

Raijifirei Sms docudumelion, but 
rct|u rps ariansiw con*nitmcation 
between lira ream mambars and Hie 
diftid. 

A.L iliif m jiiedict ti>iiipteii<m ilrtius 
a nd prrj|ti;C crisis 

Htgii. flsstirwogi ahar preset femmes 
arid Li-iu design do Ml change 
radically during dwvH lupmahL 

Lower, smee :ne product Features 
and design can evolve over time. 

CkiVBtopflBFft COBtS 

1 rawer, assuming rhal proicct 

Matures and thfl design rlra ngc 
change radic^llv during 
development II tigfuTKHittlttiTO& 
jtiur, i;^sLs c-ai* rtse cfuit-kly. 

Higher, din? tra the uncertainty dF 
changing client requinginfliits. On 
P-ojecls mft frequent cheats and 
h.gh uCo 1 '.li inly, tasIs wil! be owar 
using dv$ msEhod. 

Chani npfirmil 

ButHilrad of orach stagra of 
spraciFic ration and dravtfapfTwrft 
haloifi ihn riL-nr itiip can bn n-in 

Required in stages as parts ol lha 
project are imagi^tRil into tha 
whelai. 

Cliani -’JopliisCic-dtion level r«qu rii-j 

Niy 1 . due 1 g Ing need 1 q read and 
jnderfcrHiul piodiiClieiW^ 

dSM options and u*fci iiiterTat# 

s^JUv^hcraLvjns bulam s-suing Actual 
walking soFtware. 

Loiter, smte me dieni will nave 
woikmgpfWjCfflypes ratha-i Liun 
painur spuciFicatians Co review 

Potential c.ie-m relationship 
problems 

1 the diem debates From me 
approved approach. Che developer 
may need io ask tor additions' umc 
and mofley The diene m u v 1 ie*iuv-j 
die develops m "nickm-aind 

dinni'iy" ii 'll. 

Proiotvoed soltware ansy look 
cornplew, bui internal FuntimruLiy 
may be MrSting, causing uarealistm 
dkent Bap b old.in ns. The client m$v 
believe die; lire developer i$ 
responsible For late deliver able* or 

C 091 Overluns 

Whtfl cltcnr working tada 

Lale in [he development jKQCfSS. a 
“?i^Hdv i iii a n s 

E*rty in the d^elapmem process 
an udVBnlBiTE 1 

duality el v*"r iii.erlicp design 

PoltinlialPtf lug he-. s -i 1 : i- Mitt 

Ffla&jr^t fis* iifctJWII and innrti itrasilv 
«SRl[Fhfioda(riJ k OwmliipflFi wort 

Ftom an approved sal raf 
specilK-nhons 

PalanlHiHy lower, -sinta nuwly 
added laalinBi. nuy 1 arc* 
continuous radcisiigii d iemu. 

prafQfv|)t 4 mav make it 
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A CLOSER LOOK AT THE WATERFALL MODEL 

Now let s take a closer look .it the stupes of the Water fall model. As we*w am ted, the answer to 
the question,, “Which m«nLi'l is best?" is complex. suns - iL depends, on ho num- triors- — (lie 
type of projest, thediwIifljuiKin (cam, the clLent, etc, We have chosen to analyze the WaieiSall 
model because it is still succttsfutlv used and because »t is the basis for so many other deveh 
opmert models. 

VVc are most interested in those- xcep*, that contribute to the design and development of the 
user interface. As wc review (hew iteps, we will emphasize the interface designer's rule and its 
rcfctiwnship to other team me miters and (he client. Most ot the steps summarized here are 
covered in gitaitr detail in subsequent chapters in this textbook. 


1, Project Planning Stage 

The project planning stage answers the question,“Why is this website or software being dcvel ■ 
oped?'' The project may represent a new effort, or it may be an upgrade in an enisling one. In 
some cases, the software or website ha> been successful, and the client simply wishes lo add 
features or otherwise upgrade the product. 

Sometime* a new developer is asked to work on a project because the existing product or Lih 
original developer f-iiled to live lip Co expectation 1 -. The existing product m,iy have been ill 
conceived front the slart. Perhaps no market exists for the product- It may have been under¬ 
funded or rushed 10 market before It was ready. Or perhaps the product was well positioned 
and adequately funded, but the developer did not fulfill his obligations. Perhaps the develop¬ 
er went out of business leaving the client with an unfinished product. The list of possible we- 
njrioa gues on and on. 

1 iilTerent clients eijvcl different levels nf development team input on different projects. In 
sume cases, lire clients know exactly what they want to accomplish and are simply looking for 
a development partner who will implement their plan. More often, the development team 
works with a client to help set goals and priorities fnr the new system. 

If the new system is he inn built from an existing one, then the development team must gain a 
thorough understanding of the system. One way to gain this understanding. is to create j site 
or software map that graphically shows all of the major screens ami indicates how the.se 
screens arc accessed. A text-based site or software outline can serve a similar purpose- 

(, resting such a map or outline is an efficient wav to become familiar with an existing system. 
Is also helps esi.ihli>hi live scope of the project for you and your client- Sometimes clients don'i 
fully understand the capabilities of their own systems until they arc catalogued and presented- 

figure 3 4 summaries this firxt stage of the roftware develop men t pnK(w—the project plan 
ring stage. 
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2. Requirements Definition Stage 

During Lite requirements definition slage* you combine wliat you Ecjriud during 1 Iil- project 
planning. stage with in formal tun about ikjiitiicnct, ihe I'uiKtiniw to be included in ihe soft¬ 
ware i»r wdsiite,. the hardware and software requirements. the program fling or development 
environment, and -mv other information that might affect the design and development of the 
new sjiilcni L 

If possible. you also liiiali/c the features that will he i in .Unfed in ibe new system [f thr projfs I 
ls jii upgrade lii an existing ivslcn, you revise the feature list you developed, during the Jn.ih 
sis phase. deleting tcjlures ikat the client no longer wail Lx and adding any Hew lealures. 

All hough some websites merely pri.-M.-i s I infoi malum, like an electronic hroLimre, ihokI site.H 
and multimedia software oil er some brm of functionality. This maybtan c-commcnce appli¬ 
cation. product comparison feature, .search function, interactive portfolio, or other interactive 
capability < rearing the user interface for such fi.mclii.ifi* requires 1h.il you understand tin v.ir 
H.tJs lasks that comprise (hem, arid ibrie are let, humus Ihal Iwlp you analyEe aid document 
I hem. 

UuHhcr iisportarl pan oi thi^ si.tgy ol llhe process is to analyze the targe! audience of the 
website or software. I he information for this analysis imo come from the diem or other 
••■mwcfs, bin there is no substitute for observing and interviewing the end LIMITS themselves. If 
ihe pnifptL i\ a wt bsiie, tin- interview quoiium are designed to determine the tWtt' CXpCCtR 
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1il4i 4jiJil ill elm i.-cpiiritriiiiJs |j'vfjnitviwn *taQi IS tn 
n^lRtilith Nun li^t nt fBaCi^rffi fn bff mnli.rled rn ilv pto\ 
e^i and to sp*= “ the i^rer&ring nrwirsnmin! 


I hi' fiifL- in- lulling svhal informal inn ihr nsrrs. ^rrtc from sudi ;.i if-, the type* of -ques¬ 
tion* rbry jiL-lil.A j ]y Inask^.ind I he kitiures lhal \hv\ find iflml useful of Ylliuihlr. Theddjn 

cr uplyzes ihc ailsur&l of itic audience. 

I : i^uil 3-5 siummijw tin* huj;c, ihc im|uianodTit^(k(iflilMn stage. 


3. Systems Design Stage 

The systems design siaye is the usei interface designer’s prime lime. Considering the require - 
merits defined in the previews stage,. the goals ihal have been set, vour knodfdgi? of the taf 
get audience's needs, and tlw delivery hordfe-aie and software platforms, you ilewlop the con¬ 
ceptual design. which is the oversll design approach to the project. From rlie co-neeptual 
design, you create ibe individual screen or page designs fur the new system. 


Conceptual Design 

Dwing diit sMge, you dmtnp the conceptual design of the system, seeking way* to add value 
■liuI enhance the users fsix'tiviM 1 . The conceptual design of multimedia software may he a 
metaphor or story line ilui is tamed through Lite entire project. Tor example, in childrens 
eduia L iortal software, the audience might Ill-Ip ihr characters in I lie sh>r<. l iiid tlteir way home 
by solving problems along the way, 












Original i bunking ta puinculafJ) valuable during ihis stag*!, The team may uh.- oiw or mute 
idea-generating, techniques to spur the creative process. 


Gttheiing and Organizing I tie as 

<'hither the lieu fti' ihe concept ml ideas, and it’s time to begin creating ihe sueen designs, 
rtifferent designers hive I heir own favorite methods, Some like |o begin their work wilh an 
outlining tool, gathering and calcgui i/iiig ideas, Olliers :m, U- lu stajl on paper. sketching 
home pages or mam menu sermib. hull others begun creating screen dements using a draw¬ 
ing tool. 

Specifying Ihe Design 

When ihis earb work has been completed, it if time ro specify the design, using wireframes, 
siorj boards, or other types of apecifieationv The specification meihuJ you sde.i depends on 
the type of information you want to convey and theprinury audience for chat infornwtion, 

The developer*on cite team are a key part of the design process, Before sou show preliminary 
wireframes In ihe client and sample audience mernljers. you must distribute them to the 
developers, who comment tin their technical feasibility. When ihe wireframes are nearing 
completion, submit ihe entire set 1i> ihe dcwlojMTS tor technical review. The developers will 
nuke suggL'hliotth jiiJ suggested icvimuji.\ as 11 ctefMfy, and you then revise the wireframe 
images and explanatory text a required. 

Alter you have reflected ihe developers' feedback m the wireframes, distribute them iu mur 
client. The cl lent will review the wireframes, making revisions and edtis as necessary. The team 
reviews rhe revisions and, when they are approved., you update ihe wireframes accordingly. 
The revised wft of wireframes serve* lu guide the team throughout the development of the 
software or website. 

The designer stays in touch mill the client throughout the dcsLgn process. I'hc designei may 
Send the dieuL prdimnuri ivird rimes to ensure tlut I be client agrees with :hv project's design 
direction. The client also helps am-wer ihe designers question} and can serve as a sounding 
hoard lor new ideas. Equally important, usability testing should he ongoing during (hi* Mage 
(o help ensure lh.Lt the emerging design is usable by ils t.ugci audience, 


Creating a Style Guide 

When ihe wireframes are complete, you or a lead graphic artist may create a *tyie guide. L'he 
style guide provides information to the development team about the u«f aild appearance of 
various fonts and graphical elements. These brief documents help ensure the consistency of 
elements in ihe finished software or website. The style guide usually includes informal ion 


I C NAN Eft 3 | 


59 


siii-h which fonts, font colors, and font sires are used for headings. instruction tret, and con 
l enl text. It itiiiy also cam atn information such a* the RGB values of biinigriHiiHl color^cd! 
sliding, and other oltraentB. 


Crealmg Sample Artists Concept Screens 

the wireframes are bet 111, i m pick'd, the graphic . : rtist may create oth nr more sample oon- 
«pt screens-These color renderings are designed la show tlieclienl the finished graphic look 
of the software or websik\ bused on the user LrtfrrfiKC specified by the wireframes. This dcliv 
enable can from oncortwo sample images that are sent to the diem wjth the wireframes 
to lull nmifunaional prototypes i li.it show the look ul »H of ilie miliar screens of the software 
or website. 


The graphic artisl often creates two or three different 
graph it looks for tin- project, without spending too 
ninth lime on .my one umtcpL These LUiiet'plK jjc 
shared with the client, who will choose a fovorilc or 
provide additional feedback It) the artist, and the ftrrj se 
then incorporates (hi* feedback into the development 
of additional ^tmcupi -screens or actual protect de¬ 
ments. during the implcmeni.ilton stage. 

Notice that the wireframe'. are separate fiom the con¬ 
cept screens litis allows the client to evaluate the wire 1 
frames far ihdr organization and usability and the 
concept screens for ihcir graphn look. Since the choice 
of colors and Overall graphic look ol a project Lend lo 
lie more subjective than the hinctional layout and 
organization. it is tmully best to allow the client to 
evaluate it separately from the more fuiiJjonaL ele 
ments. 
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lust as the -ik'velc’u-s review wireframes before they 
arc distributed to the client. they should also review 
concept screens Lw ensure Ehal tlw pphk ideas pre¬ 
sented arc programmable. Clients aie likely to get 
upset if they fall in love with an artists concept, then 
find that the actual website or Software falls short of 
the original concept due til engineering constraints. 

I igufc 3-6 is.i din ratu oftliis .stage, ihe system.*, design 
stage. 
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4 Implementation Stage 


I Ik iilipkcineiltatiull till +^c.! jiv.IiJhI the ■. i l.iIkml uf ihc program code, graphic, jjiJ mullinn 
du. elements- j LLiiiiJn video, eU ) ifui m.ikf ihe hvritiecis Sometunfi the designer j.1 m 

assume* oih 4 .T sudi us working nis the developer or graphic artist. The interface design¬ 
er who crated the wifrfr^ifles is 
usualk the keeper of the pfoprcl 
Vision. It i% this designers revpunsj 
l>i I i tv to ensure lhal the sysiern being 
developed remains true io the 
design. 
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II there sire specialist* bundling I he 
code development, graphic design, 
u.jad creation of mtilLim-edia ele¬ 
ments, then the interface desigjief 
becomes she prim .in contulianE U* 
this group. Alllirougli ihc wircfraHiL-- 
.ind stde guide ^lLI answer tium 
questions, no set of spft-ilkfcticms it 
able to foresee every situation that 
Huy urise. The designer revive* 
rnaimhUiKk*. provide additional 
design details if necessary, tests l he 
emerging code, and mod dies the 
design m necessary; such as when a 
pjrEieiikir screen i.krrttcrtl or hum. 
lion proves difficult lo Code of 
implement. 
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Tiin '-ipl.’T' -ihitiuii stflijr piciJii: ■::■ [fci: l<i£ii ;■ .<];■ u : a. a-|d 
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Figure 3-7 shows j. <!i-u.l;i- ani of this 
si . I he i mplcmtn Lai ion . 


5. Integration and Testing Stage 

[hiring this singe, the interlace designer's primary responsibility is to test the developing sy- 
I cm. Although tin re may he full-lime qualily .is^lluiilc ll-sIits uii the Il-Jiii, thej may mhe 
ljIlIi the ivpc* of errors tlu.L the designer is likely to notice. Anyone who has developed 
udie kjuws clut having more titers chocking. lhe software results in a hLgher--qualiry end 
producl. 
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The soflwaiv or wdnilc h ne.uly always drWi*-<| 1 h> itn- iknt in sUgri, If the princet if. .1 mul 
iLnircJa^i software program, ihtdtwlo^mem team sends, imujim reLeast^Aithoi^ji these del- 
nilidTiK vary with the dindnflint .'in i', the twin alpha fflraw i civil lypvM-in. .1 ss-lem 
with partial functionality. A Ikih release often has lull I1.1 n^i j. hi .1 1 ii v, hui che sol [ware will not 
have been fully tested and may have some mugh fvpnis, l.mge.eoiiiplev pnueclh may have sev¬ 
eral alpha atjd held itages. 


'['he final release may Iv called the 
jfuW iNjj’trr, |>rftih-rcfr™ master, final 
version, nr similar term, It represents 
the finished soft ware, fully tested jiiJ 
iVadi tor distribution. 

Websites may follow a similar release 
schedule- Oiieii. however, the devel¬ 
opment team will rmt ihe emerging 
website in j seeure location accessible 
only by pfasswcml. l‘he dienl t-un pe- 
view ibt progress and forward com¬ 
ments to the team, Once the site is 
complete and Inis undergone ihor 
ough testing. It ts moved to iLs per 
moment . publicly accessible Well 
location. 

Pi pure J-S summarizes this stage, the 
integral um and testing stage, 

I'lie inter fa l? designer m.miljins 
consulting responsibilities through¬ 
out 1 he in '■tall ai ion and deployment 
.i. '.'.i .md iht m .1 i 11 Lc 11 ;nv< I ■'■• 

Mow that we hove explored how ihe 
design of the iiitcrfjCC fits into the 
software and website development 

pmcTffcS, our rievl step i-» to esa itlitlC 
Ik ivv to set goals and assess needs for 
the websites and software we are 
designing. 
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SUMMARY OF KEY POINTS 

* Design and development processes help ensure that the coneci steps are performed in the 
proper sequence. 

* Adhering to an interface design process saves time, money, end effort, while increasing i ine¬ 
quality ci the finished producl- 

* The classic software development process is called the systems development life cycle It 
includes the Waterfall model, a slop-by-step process that includes client reviews al each step, 
of the process. 

* The basic stages of the Wolerlall model are project planning, requirement; definition, system; 
design, implementation, migration and testing, installation end deployment, and maintenance. 
Variations clthe Waterfall model, including lha Repealing Waterfall model and Spiral model, 
help ytc. d£ in the hands of clients At earlier stages of development 

* Agile eeftwaiB develupmenl methodnlogius. such as eXtreme Programming, can be useful in sit¬ 
uations where proiect requirements or the imended development technology is not waif known, 
in these methodologies, Ihe development team designs, creates, tests, presents, and modifies a 
serias uf quick prototypes which, unco approved, Bie integrated into the pf0|ect, 
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in review 


Why is il important to follow B devstopiilUPll piocess when treating a website or 
multimedia software produci? 

• oh processiftfir-,% Ihs! wh! :h-i svsi-rii 'w.iireirnr-s •-? -n ■: ■, ?l\ well • new 
and slab in at the start ni the project? 

Which prDCflSEes are rlasigned to handle projects with changing requilaments? 

'Why lO agile aeveiopineni methoduiuuius make A mere mliicui! Us connol the user 
interface design c ; a prciect? 

Wlial is (h e primary role of the use r interface des igne r during ih 0 imp let mentation 
stage of the Waterfall process? 


exercise 


the flXtrflme Programming method involves pairs of programmers working together 
tu ere nte prog i a hi code What il user iiiLhiIhch designers also paired up to Create 
their designs? Create a :m ol potential advantages and disadvantages to such an 
arrangement. IF feasible, try painng up on a das<gn ass?gnmanit, and see if your 
expectations matched reality Are you a hie to create hotter designs than if you 
worked alone? 
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objectives 

Dflrscnbo hew to ijalliEf ideas Jo hglp iormulrtte gorilla lor a fie w di revised sy&iirjn 

Ajinly/ei m4 repnpnk GKisnitg websites or soliwnie uswq sHe^&tlwaiE Mow diagrams nod 
sitB^snliwnJi maps 

RuptOsaffil ibe slops ul n preeuss u^my 4 flowchart 
Croilft perootnis to r^pmspuu dHfereirt irs i?r lypes 

Examine haw Ga-iilextuaJ iiHpiiry is used to uaiil ins.if|hl triio mi employe is work 
Aifeilyi^ Inski Usinsj Ersii-entiol ass Gales 

introduction 

The first itifse chapters ol this book tvara designed io introduce vo j lu ihe p - ncipius oi user inier- 
face design sad 10 help yew under gland als place in LJie software develppmenj prw^i, la ihi$ thfip- 
ter, we will roll up our sleeves end begin Che acli.nl work pi inSerleco design, in-cluding setting goals, 
analyiinfl an existing websice or software program, and defining the rmsuirements for a new or 
revised sysiem, Defining requirements means undeistanding llle users and -analyzing tbe tasks that 
they will use Ihe system v_. pcrltum 


65 


GOAL SETTING AND NEEDS ASSESSMENT 
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| sea I sarong N'fid naeds assesBimnnr | 

SETTING GOALS 

Whal j', it c|ur i he i l | i L“i Li win In I he website ur multimedia software lo accomplish? Some COIIV 
|Mnkj will have very well thought mu gouLs. while others uuij- have only cite vaguest gu-uts. 
Nearly every owner of an e-commerce website wants t« increase i rattle and idles ,u ihe site. 
Otbtr jjoals may k to eitnH a sen« of community, to perform a public service, or to increase 
brand recognition. 

Some Llienli may base specific feature*. ihai I hey Waul implemented in the die or SittlWStt, 
'] lies may ivjili in intruduLe a new product ur service, build a mailing list, or provide a EbrLilli 
|br making JHimiincemenls, I he wehile or software may I -l one ul a number ot different 
Strategies that the client IS implementing to accomplish their goals, 

An designers, we mien find ourselves cncnnr.iging our clients to cstahiish ambitious goals tor 
ihe wehsile* and antiwar* ihei ask ns to create. There arc several reasons for this first, most 
of in. wain m k invclived in ihe creation ul something special that brings Hue value lo pen 
pie. A project d.ai sets out iu do something umquc and exciting can recharge out creative bat¬ 
teries and energize everyone who comes in contact with it. 

Ambitious projects si retch us in ways ihai we cannot Anticipate. They add signilkarulv in our 
skills ami us yn’iil ulrlirions in our portfolio. They are also generally worth more finan¬ 
cially lo lis than more modest undertakings and keep us gjinfutl y employed longer. 

Ton often, a client s budge I and schedule con Hi run ts stand im ihe way of a pruiort being all il 
sail be. If We tar gel our clients lo itnnk slralegically now, though, WC LIKTiMsc I he dianett 
ihai Lliev'll invest ihe time and money bier to help ihc sy?«ni .achieve its potential. Bv think¬ 
ing long lerm from thy start, clients allow us (0 create designs and make eark decisionH ihat 
anticipate and accommodate future growth, 

A great w.iv to help you ami your client gel ideas ihdl tan support the client’s goals is to ana 
Ijrac the website or software ofktULg cl competitors ur organizations bamil.ir lo1 he clients. Are 
there ideas worth considermg Adding 10 the diOill's system or improving in some way? What 
ore these competitors doing to attract and hold visitors? How are ihev using the unique cap a 
hilities of the Vteh and interactive multimedia to accomplish their goafs? 

Vi hen considering which new leatnres u> add, ihmk about how rhev will directly help accum- 
plish the client V business goals. It makes nr sense in spend money and effort lo create and 
mauilain a In r Mil ul-w c.ip ability if il does not help achieve ihccLieni^ goals m ,l measurable 
way. I tv keeping the proper business perspective, you. can help ensure the success of ihc new 
system. 
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ANALYZING EXISTING SYSTEMS 

If yuii have been hired to redesign a website at multimedia software 
program, your first step may be to analyze this system to understand Lis 
Capabililies, struct!ire, .uni interface. We aiialyi* an ireiclEiig system 
prior to n-doinimg ii m aenohiplisli the following; 

* Understand the client's perspective. You will aci i> mp|ish much mou¬ 
nt the initial client m set Lot; it you jiv prepared with a thorough 
understanding ot the current snitem. 

* 1 'n demand the present syitemi s^ ■ i]v ami br s tdth l'liis is only pns 
sible hy analysing the functions tmd features of the existing system, 

* Understand its layout and navigation system. This allows os to keep 
alert for complex site organisation, poor navigation, nr confusing 
icrecn element*, all of which we can improve as part of our redesign 
efforts. 

■ Look fur other factors that reduce the etTec t isenesc of ihe die, such 
as poorly written text, 



Thg first hme you look at a web¬ 
site or software program is ihe 

last time you can view u objec¬ 
tively. Therefore, be eien Tot your 
first impressions and record 
1 ho m lI iiijentiy. 


Creating a Flow Diagram 

Many designer* prefer to create a 
visual representation ol the exist¬ 
ing system. This nfien lakes the 
form of a kite or software finw 
diagram, which uses hm angles 
and lines to show the systems 
structure end key screens al a 
glance. To creak- a flow diagram, 
use any tool capable of drawing 
rectangles, connecting lines, and 
te*i. Beginning at ihe home page 
of a site, or the top-level menu 
screen l or first funs tiona] screen: 
of a software product, you creme 
erne rectangle for each kes screen 
or function t."w arrows lo show 
ihe navigation path from one 
screen to another, A. flow diagram 
of a very simple website is shown 
in Figure ■l-l, 


Flow Diagram of a WrhMo 
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A wihL’.ili Hr i v diagram Foe i wnmhiiVfbitlA nttfib Thy ansa eimcTure m a glancci 
“... flharlmfl helps rfnferEUt -n ; fv J i;;-m ■■ n i ;«■ ■■ r. r 
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Tlw rt'% icwn-r'i juUcs Jild idtui* tJii lNr i^lipilL'lI in it sejurjIcdncliBpit [f JrtMi are cmling J 
flow diagram ol a very rampfci wdbsite or softwiie produLi, j®y niiv need more than one 
page n i show the 4-nrirv Mrikiiarr. If utfvyttu cu create ni ihai shows [he main sec ■ 

ii ms t-1 11 wsf*-!i then lio ?-1:1il i■ ■ n--1 pujn ■- Hi ^hiw (hedrttllled flow diigram^ Inrnch Of 

thi' wclimi*. 


Creating a Sile/Software Outline 

[ LLl" EIkW ilidg.. lllJl w< jllNC 11 i -.L iivit‘d LisVs hian dllil LiJWk lu show Lit Hxisling mum's 

structure at ,i glance. Liv am l j .lit, ailleor solMreouttiiK ns*-i texi in m outline format to 
show the structure nf an existing system. Although site or wfbiirr outlines Jo not show nav¬ 
igation paths as well js flow ctiagra ms iln, they offer trwrtl adviintdgrs; 

■ You sun create and rrvttt ihem qu if klv and easily. 

* They do not require separate insert pajivs *r sit her special treat mem to map complex 

systems- 

1 You CiLel Include your own notes, recommendations, anti oilier in fermat hm wilhill the 

outline. 


Table 4-1 shows a site outline for the same website shown in the fkrw diagram in Figure 4-1. 

Ln the website outline, the highest level item is the home page. Indented unt level from the 
home page are the primary pages—those that are accessible from the home page. The nett 
indented level corresponds to page's or function? [hat are accessible Irom the primary pages. 
,i m I so on 


Also not ire rh.it the reviewer b-v- n, -in led hi*. preliminary observations, within the oul line, set 
aside in square brackets, J'lie quick analysi s of the website has ravejleJ lhal the contact infer - 
mat ton is liupliL.ikd and lhal il might Ik Iv-Lli-r in the Aboul I. - section- The tjllr of 

one link, h u h,mge is uni li-.ir. : here arc also .1 couple of dead links that should he updat¬ 
ed or eliniinated. 



When analyzing an existing soft' 
warn application. augment ymi? 
nwm screen by 'Screen analysis 
by reading the online Help $y$ 
tHin and the documentation. They 
often win reveal the software's 
more utrseura features 


■line and i h: S: notes are especially usefiil ro refer to ill client and 
ream meetings and fmivertalions. II r|n- dm befini tt&m|iboot the 
Hu I Ebuilui I ■ se, litin. it 111 -1 i.ikeS -i moment to glance down ,md see 
that this is within the Inside Scoop area and currently contains a mys¬ 
tery product, which is Lcler y n ■■Ji. If possible. take I he I imo to study and 
memorize the various sections and (heir current content. Then apple 
your knowledge lo help improve the system. 
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Tafrlfi | 4*1 l A rabsito fllUp Inr 1h« f.inu? Bite stiDMvn rn Figiirs >1 : |hvw it* outlina fuFircat. Thhs-lypfl n- rrn^i 

■ Li |J BD^iftfll ID CPEfltU an lJ uv=i! 


A SIMPLE WEBSITE OUTLINE 

1 Natural FouilS Hume Page 

A. 

About Us 


1. 

Mission 


2 

N illn■ Tour? (c cf Kl Id sign up lor cue haul cm-^Le tnuraj 


3. 

Owner info [benefits of becoming an ownerl 


4. 

People IphciLus a! slaEF and CuStdnlAisI 


s. 

Jobs |CHW Current posting wi|h link lo meet staff nwmbarl 



a Sla'f msmbt-r proli las | photos and K*|J 

e 

iits«lLi Sceo fi 


i. 

Workshops fcurrcntlv a do ad laikl 


2, 

Njiwi Scorn [Lftjil and photo] 


1 

Hot Products I mystery product w.iti link io KJemification and mformaHonl 



n. Csla ry runl miDunaii&n and r«c ipas 


4. 

Kids Club ItffKl information about tai*flfits and how to join| 


5. 

□duration Community [m *11 

c 

Hoi 

Topics jltiis nnma may b^ too similar lo Hot Products] 


t. 

Uofijngt Page | describes a food and wellness mag a i me; unclear tillul 


2 

CurreM IstuOS [Ibis page is displayed whtm Hot Topics is cnckfldl 


1 

Organir.s [tflXt mid several lmk$[ 


4. 

Definitions rcurrontly under cmtfcir«ciion| 


5, 

Fscipes Itf^.ll 


G, 

Brochure b lleirt rretrirpli fiom brochures; seems more hk o dfiTinirions. n»\ie?|; 

0 

Links and Contacts 


t 

Links lubuur ?fl Im4i Ed cthur si 


1 

loctfiotra Itesi. includes link !□ Nsw SEore page; move la About Us?J 


3. 

Cofll^d LJ& la-Hflii in!!>rinii::.'ri j:-. LDcalinns, movw W Abcul IJs?| 










70 


| goal Mtiiin-g &nd needs ass^ssinimi; | 


Creating o Flowchart 

Ailvinlv win) malvisfli procriacs ut any type nf soft wan 1 sknld knium Iww to create i 

flowchart. it is one of Ihe most usdul tools for illuslralm^, llw steps and flow of * pnuo*- A 
Q^wdifft indudes specialized symbols whose shape carries meaning, Ei usually consists of a 
numlHT'il v|i,i|.hhI symbols ronnKlcd byline with arrowheads, hath symbol shspc indicates 
itspurpoM: FipUfc I 2 shows soine of ihc most common shapes Used m software flowcharts 
.mJ their iiiL-.Litiiijf. 


Common Flowchart Symbols 


4-2 


Hn-r-a a;e some ahhe cDmm&nty used 
p a?E s. w bole Flw- , e h u ns Uial 
■ aniiil J just A k,v IffTlllDls iBUCll J& 
pjocGiS lucCunglci Anil duL'iltMl diA- 
T-aml^ | nrn F>:ic thi s fel!> 


UHMD Uf-S-CT** 
f-’L'lTil > *CIK*- >17 
JF y*n(i r .) + 
ptswrt ff rhtfcFiJi«a 

a 1 1 ppi- q ii fllii 1 , 


UM "trW« i iec^UFi 
,u; fc J£ i#a cr hi -fl# 

‘Li u S# fflXt-i Sirrf C 

iT'1'.'iTH: ■-"■*isJ Un* Ml 
irwi pa?^rtn pilh- 



Jl#lU r >LJtaTp 
<1=^ Qt ***: t* 

ar-v; 


.'cp Ip rv*rjlo Mb 

sr --art Dh nriidii -lxt 

fel -1 hPd Ur* 


1 kp hi irtdi k M i 7 'rlnc 

Jii1|.-j1 IWiMte J« 

l«* 




UffllD r>3 f. lig zau 
•np-pl 

MM Hi ‘bfrSef 


U|P !■> mJh U-I 
fJOiI. "liirJ b-s i 




UH1D . J. Jl-a li a 


.'SnvJr 1 mvnMDf 



Vau may find rt usoliil to flow¬ 
chart the 'normal' path through 
die process first, then add 
exception paths Using our 
g* ample in Figure * 3 wu might 
create IhE normal check-out pig- 

cetrure then odd steps for allow¬ 
ing the uset io abort the check¬ 
out process. 


Winn. Lreatinp a (kmclurl, voll luiihciI tJic various shapes With 
arrow-headed lines that indicate the direction of flow. Figure 4-3 
shows a simple flowchart of n website's e-commerce process. 

I'he process begns ■=.: 'I': - lerminru u their I KegmT then proceeds 
down to llu- prnwi labeled ^Browse for Items." After l his step is a deci¬ 
sion diamond labeled "Add Item to Cart?” If the u«r deckles nol to 
add an item, then flow follows the "No” line, which goes back up to the 
“Bnwse fat Items. 11 step. If the user decides lo add an item to the carl, 

diL-n |►run -.sir»y. In.lmvs lilt “Vc r 1 " 1 down lo "Choose Shining 

Vb ftiijd" Inul vu cut. 

This flnwi lisiri shown iii Finnic -1 3 is uveraimplificil, Tb make il mure 
accurate, we w^uld ,idd Steps lot mJisalLhp wlietliei or out the cretlll 
card number was iiilidaled.. We u-uuld jIbli include paths lm jlhswin^ 
the user to i hurt the Lherk -uul pnKcsi before il was completed . 
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Flswchart of Simple E-cgmmerce Wthb 




Here is s s*mpMifl2 llEwvciian ol an 
e-eomn.efM webbie tuikiw its flow 

suit ■ ■■: i- 11 ;u 'i in- ;i: i 



A l’.vjiys create your uWn llpw 
diagrams, Mow outlines, and 
flowcharts of a system, rather 
than relying on art existing one 
supplied by the client or obtained 
(Enough other mentis. You wiH 
leem valuable insights m (lie 
process of creating youi own 
Alter you have created your flow 
diagram nr uutlme r (tien it may be 
ustrlul to ravmw one from a dif¬ 
ferent source, if one exists. It 
-rrughl reveal a part of the site or 
software that your analysis 
mrssad or show functionality than 
was originally pari pi the syslam 
but Inter eliminated. 


Use any combination of the flow diagrams, outlines, and flowcharts m analyze ^velxsitei and 
software. You might lim? ilie examples shown m figure 4-1. 4-3, and Table l-l as siorting 
points, then add features that make them more useful tv you and your clients. Well provide 
an example- of this suggestion later In this chapter- lust keep in mind that simple is better when 
It aunts to diagrams and other explanatory materials, 

UesidcH analyzing a clienl's existing sue or software it is often useful to analyze your client's 
competition a* well. Often your client will mention competing companies* products or web¬ 
sites in your initial meeting. If your diem doesn't raise Hie subject, consider bringing il up 
Vour.xi.-lf, Try Id gain JIS much information as possible about yimr lMl-iiI s opinion of l-.llIi of 
these major competitors. Whai docs your elienl like and dislike about their wvbsiLrs or soil 
ware? 'Jlus information car prove extremely valuable when you begin designing VOLtr solution. 
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I 


nr it nq inrl rh eti 5 



U -1 • 1 r|ic^ik,iL» fur ihe new svsii-m have breo e$iabU$bed*nd any L'vhJiiie system analyzed. du¬ 
nes I step is to define the site or software's requirements-I hiring ihis siep, you will identify die 
various types of users of ihc syslon and assess their needs. 


ANALYZING THE AUDIENCE 

['he Audience analysis. phase i* where you dispense hiih all of your ussumpiion* about whai 
vour liters ni or how the-. prefer to perforin tasks, Ignore this step and you risk designing 
,i -.cd-wiie nr ■,iUw.in' program (hat misses its mark. Perform this step well and you will he 
re •f.irdi'd ■■■illi iucunilc, firs! haul observations aiul information (hut will inertave the value 
of Mil ^Idlh you design. 

I ksi|*iu-r* lisl- .l tiLJiiiln-r of Ll j l htuq ue* to develop j Iborough understanding of users, indud 
snjj surveys, interviews, direct ■ A users .1 turn and inquiry, ami per«>na®. Which icshniquc* sou 
use depends nn the nature of she project and how accessible the audience is to you. 


Surveys 

One direct way in analyze the needs, of an existing website* users is m solicit feedtach Fmin 
them ('hlu 1 ibis take* die form ol in online Feedback survey. Although ibis i* n valuable 
suui'u 1 of iiiJitfiluliiKiL it can k challenging To gd busy people to lain: the Ij me ui fill out I he 
siirVc',. Some utnipumes offer prize drawings or dLscounl Coupons as incentives In users who 
lake the rime lo respond lo e| 11 cstin ns online. 


be sure that vour survey .isks questions rh hI virld useful answers. |-or example, some surveys 
ask users lo rate their sites on a scale from 1 to I Cl for a vjrtcly of factors such as ease of u.se 
and ability Co find wliat dies are seeking. Such questions may tell yiHl liow Uteri rale your site, 
but wbai speciliL actions can you lake with such information? It it, better to ask open ended 
questions such as the- following: 



Pi Civil It? -\ place Far survey 
i q spandi»n1 s In include their fl- 
i-idi addreti,^ but don't requiru 
lJiem m prpvHte (his. People 
value their anonymity and may 
quickly Fine from a site the! 
rgqwres (horn to identify ihem- 
stilvus rmedlcssly. 


* "Why une ism visiting our site today?* 

* "W1i,ii iieni or information did you not find th.it iou w-i l- 
likikillg for? 1 " 

■ "V/lnt ijoukl w do to improve ihlt gite? 1 * 

■ " Wlut fed lures would you like to see added to this Sitef* 

Site Visits 

Coat dueling a siu- mmi you the opportunity to both observe and 
interview users .uni ;>otentjll userv of the toll ware or website you are 
designing, 3 Ins step is pat l it'll Urb important when you arc develop my 
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applications, hill hull so Useful fur website dftiftl. Let's s<iy I hat wl- jiv 
working on die rudesogjii or a website for j local store ih^t <iltcr& wild 
bind feeders, bird trunk and associated items. She website includes 
e-<oinmcrcc capabilities to sell its items tu customers- ihrnugluiul ihe 
country. 

One ut Liu- best wins to IcJul jIsulU Lin- shopping hablls ol people who 
pure I id St i Lems tmm such a slore is to actual!'.- visit one a nil speak --ith 
them tlrsfhanii Etching users (with nr without interacting -i I Si 
tlu-rii is based on (he anthropological discipline ol cthnugrnphy. 

When practiced tu anLlu'upolo^ists, it nieaiis studving tlie life ihJ 
activities ol 41 group of people, often by Living with them lor 41 period 
of time. We can learn a lol about users hy. in elfcri. living with them as 
lliey perform their job* or tasks, 

It vm Ate lucky enough to have a nearby die ill with a bricks and-nmr 
tur slore, you inighl be able to ask ijucslious of rhoppcis uIhjui theLf 
shopping styles and intentions. Perhaps nmr diem will be willing to 
offer customers a discount on their purchases in exchange lor their 
valuable time and information. 

You spend M-u ral d.u , ji the dibit’s store otisti 1 mg .11 id interviewing 
LiulmnLers, heating die stories 11 icy teU you, and learning about their goals tuid their expeu- 
cnccs meeting or noi meeting those giul^ Your ubmitiais indicate lhal most of the store's 
customers seem tn Vail into several distinct categories 

■ Some an- adults who teed buds year-round. Manv of the people in this group have an in- 
depth knowledge of birds, their ideiitifkatfon. and their habits, A number of them are 
retired people with time lo devote to iheir 1 lobby. 

■ Some are parents who want their young children to develop art appreciation and fascina¬ 
tion wiih birds and nature. 

* Some ore people who are looking tor unique gift ideas lor friends or family iiK-mbiTS, 
About lull of those who make such purchases don't feed bird* regularly or knov- nunh 
abimi them. 


I TIP I 


If it i$ absolutely impossible lor 
yii!i I* observe and analyze rhe 
behaviors nF aeliml users, then 

speak will! whoever hardies 
sales or marketing fur ihc cl uni. 
These people are the ones who 
are mast likely to hear what cus 
lornms whiu, (icm't want, like, 
jrid don't like. Client support 
people are also u yuotl smircH ut 
information, since they Field cus¬ 
tomer compin nts cailv Keep in 
mind, however, that such second 
ha ml in Farm :i [i an is nu :.: it: k m ul n 
lot ItfSl hand customer ubserva- 
trni' and nterviews. 


Creating Personas 

Often there is more ill.in *nv typeiff u-wr in ihe i.url-i .miLh-me. Sonic designers use penurmv 
j, term coined b> AIjh 1 .ooj-ei . iio cun. of the l isuul Bavic progtu m u ■?. htijpkigc .mJ a piu 
neer in iFie field of LLSC f interlace design- A persona is an imaginary person whose character- 
istics march a particular type of user of a website or software product If t website or software 
product Will serve different uxt Types, ihcli the drs^ntr creates a JKrsoiu in represent cnch 



iwr type. These person as arc discussed as if they were actual people during the design phase. 
They hd|> 4 n$urelhal the interface will aetnirmodiiK the hill range of users that make up the 
system s audience, 

Yoll c i lmL c three pMTSUiiai LO rqiltiott the rnajnr types of users you export to reach with your 
wrhsiie. You it rime them Adam I Yard, the L i ban.? family, and Mrs. I larrirt Upp. Sun by ere 
dlinjia story tint describes each persona. 

Adam I. Yard is a M-year-old jeiued armed flutes officer. He has numerous bird feed¬ 
ers situated around his hack yard, where he has planted shrubs and trees that provide 
.idJiiicm.il fond cin lI shelter for the bird', f rom inside his family room, Adam can 
observe I he muiiikJoiJi species that are .1 1 Lr .1 l led to his ferdro, which are tilled with .1 
variety of different types of bird foods- Ht pmdiay» seed in bulk, since ii saves him 
inoneyover the long run. Adam likes tc share his knowledge of birds with others,and 
he keep l rack of l he number of different bird species dial he has attracted to his yard, 
1 Jo i s ih'.i rl y ■ i bse-ssed wilh keeping 1 he Hjoi 1 re I s ,1 r> d neighbor's eats fro in deeiinati ng 
lus feeders. 

I UrrieL t. p j> m 1 till of trouble. Site is pressed Lot tune, is always, U ring to Jimj 4 last 
minute bin hda\ gift for her mother, who is difficult to shop lor. Harriet doesn't know 
much about birds, but she ha* heard her mother ypeak with kn about the budsche 
hear* singing outside her window. After racing up and down every aisle of the store, 

I i.Liiii- Si- L-L Is.. gill dock 111,.gs III .-.nil In nit mill .! different Urd su ij. SI .- .ides 

her name 10 the store mailing list, As she is walking out, she is trying to remember iif 
she is supposed to pick the kids up at soccer or if it's band practice day.,. 

iTteUrbana famih consists of wife Ben y, husband barney, and iheir two school-aged 
children. lad nrnl fill. The I'rbanas are concerned lhal iheir children don't experi¬ 
ence much 11,1 Lure in the city, so they want kick and Fill to get to know ami apprcci 
lie (he wild bird species tint live in their urban ueightn>rhiHH±. I hey purchase 1 num¬ 
ber of items- -a feeder, several JitJerenL kind^ of food, and an illustrated bird identi¬ 
fication hook to pel 1 hem jund on their new hobby. 1 hcv an? interested in the edu 
catinrial benefits that I he children cjii derive from the experience, and they hope this 
i* something ilia! ihev cart Jo together is a l.imili 

The personus arc cUmpusilci, created after speaking With .1 number of ditlcielU people and 
observing ilieir shopping behavior in the store or Asking bask questions. Eidi persona repre¬ 
sent* a potentially enormous number of actual users, but. focuses on the motivations that 
drive ;i single type of shopper The more people YOU observe and interview, the more accurate 
your personal will bp. 

Finally,wcadd rfclaiU lo flesh outlhepersona*and give them lift:and meaning. When com 
plele, you 1 personas may include the following items of information: 
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■ L'lie persona's name. J lube an kw totally fictitious or provide some insight into the persona's 
description or point of view. Don’t di(msc names that will cause the design or development 
Icilm mpoke fun al or li^tk down nn the group represented Hy the [vrsoM 

* l']te personal aye. 

* A dip ■art “photo’'of the poaonj. 

■ An indiLjtkm of the persona's lamihanty and comfort with computers. 

* ^ 1 1 si Of distinguishing dliuictciiitio of the persona that uotild. im]wt the design of the 
website or software. 

■ V pel |H'evi' i',t vom-ern nf this persona rflgli'd to the completion of the t:^k vnu nre 
studying 

Our three personas are shown in Figure 4 4. 


Three Personas 
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Sieiv are with' '.viivh design lts w personas to keep the needs of users foremost in their minds 
.is tli- v tlesiign a website or multimedia software 

■ Hring I firm 1o design meelitlgs .iud brainstorming sessions. 

- Mount the personas on luge poster board and display ihtni where they and the desijm 
team can easily sec them 

■ Surround the personas with objects that represent the persona's needs and wauls. 

■ tf the softwa re or websile being cm Led is an application, t hey add the tasks that e?ch per- 
smii.i is responsihle for completing. 


Converting Personas to Design 

What dues do the personas give lik.iLsouI the shopping habit' »1 these types nr people Vl.irri 
J. Yard is a pntetiii.Ll repeal customer who continues to invest time and money in his hobby. 
He mas l>e Attracted to unusual bird roods and articles nr information tint contribute to his 
ability to attract new kinds of birds to hts feeders. When new, innovative product*; become 
available, \dam may be inicrested in hearing about them He may also he interested in links 
u> profcwiiHiii] ornilhohy. ing.mi/.i1nnis nr local binlwakhtng groups. We can brainstorm 
polemill ideas for attracting Adam's type of user during the concept development phase. 

As wdse seen, Harieti L’p looks ibi unique gifts dial she can purchase on the go. We might 
consider creating .iml put ling :n place tool' lli-.iL make sh ippinii tor girts including gifts tor 
oneselfi easy, fim. and efficient. For example, we might provide (he means for shoppers to 
quickly Locale gifts based on various crilerij such as price range, recipient's age, and gift lypc v 
sue h as fun ny gifts, useful gi ftj. or a rl istjc gifts. We m igji t even develop a serv ice that allows 
customers lo enter the lirsl name and hirlh and anniversary dates of I he people Lot whom they 
buy gift*. When the d.ife nears, we might automatically send the customer an e-maB reminder 
.dong with some gift suggestions or ducounS offers. 

I he i. rhami famih. although new 10 bird feeding. wants to gel started as qukkh us possible. 
Mr. and Mrs. IJrlwna .try riiLiM iiitors-sti'd li i 1 1 ic Vilucilionjl amt family benefits of lhe hobby. 
This type id user mas be attracted to & complete starter's kit, including everything one needs 
to Attract, teed, and identify birds. If building a sense of community is among ihe goals tor i he 
website, ihc I rhamis might be interested in online proiects., such as "build a bird feeder from 
.1 M: .u I) IkiIiIh-," or kirs fiiat a t.nriiiv can build and complete in a d,n We might make a note 
to Lira in storm some additional educational and family ideas for altrac ting cusl onicr.*; rush is 
the Urbanas. 

I he s.ilucul pcrssuuts is thai tbes iolus vour efibriHoo soleing the problems and meeting (he 
needs ot actual users, Creating u persona give* file to thy needs of vour audience. As you flesh 
out your dedgns, you mas find youndf saying things like, “Hoy, Hindi is really going to 
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dp j' il'l Laif tint Icat li i v." v* till experience. u>u will learn mu to waste time creating for 

user tvpes whose needs are out nf step wiih the majority id yimr ludirncr. Yon ni,o inn b# 
able to inert everyone** needs, but creating [tersotiJs will help yon aulkipale anti (ksi^d lor j 
Urge percentage of users. 

Alihough we used j ntLJ Liiul website a* uiu example, uvatc personas Jor any iype «jI website 
nr jimliimctlia soil is a te that you are deigning I'erbaps ymi .in’ credimg a mu 11 i ii ted i.■ appli 
fiiuon for a hold kiosk that helps- visiliiij! gue-ts decide which restaurant to chmiir lor din¬ 
ner- Von can develop personas to address the different nmls of ptupk who mighi mm- mu h .■ 
MtilLlv. suih as tiulfrifiKL- allt-ndc*-<, ■ >klL of town business pcoplr, and vacationing ttMrpks 
or families. 

Designer ut business application^ ina* Lreuie peiMmjs to represent each type of worker who 
will access the system. The pmrinss summarize each type of employ-iv's primary nsivons for 
accessing the system, the W»tk conditions under which Liny use the system, and olhv inlhr 
mat ion that altecis the system's design. Sm.li dttlgrteri o-iltn use n tedimrjue called contexlu- 
aJ inquiry logaiii understanding oi the needs and experiences of these users. 

Contextual Inquiry 

The goal of contextual inquiry is to provide designers with accurate information about men’ 
application needs. Tint in formalin n gathered is accurate because llu- designer or usability 
expell observes ,Mi:k:is while the* perform iheil '..ixi.v Iftlic! I tun id) mg on workers 
memory or opinions about those tasks- 

A contextual inquiry is different from a survey. When Coililucliri^ a ItWCy, ihe inter-, tetter has 
a list of questions to ask the object directly Jn ,i rontrxuiid inquiry, ibc observer umi. illy 
a list of topics, which are explored within the Context of tile' subject 1 * job duties. As the work¬ 
er performs tasks, the observer probes with questions designed Ira expand the understanding 
of tho-w tasks. 

for example, the subject of a umiexiuaJ inquiry might tea help desk support specialist who 
is sent problems or questions about a specific software application via e-mail The employee 
ihen levc.irches and provides tin’ appropriate solutions AT answers. As the employee searches 
ihr d.itabate of known problems and nlntiur^ llu 1 nbscmti witches .u-q may ask questions 
about howeasy or difficult it ic to lind the infomutinn using the tools provided. 

Thc observer must exercise a great deal of skill <md sensitivity to obtem uid ask question 
without hindering the employee's ability to dio his or her job sessions often last cute to sever 
al hours, jnd ihc olwrva takes accurate notes of (In -■ ,'-i >11 ,md the employees responses to 
qUL-xlioiii, Ike designer ilws tin insight gamed to acute peiMJiuv and provide ii.l-.ab I'm 
improving the usefulness of die application. 
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ANALYZING TASKS 

I here is j very u](J stol 1- iboul d lighter id .iswunhb pnK»v Al cum point lii the process, j 
w nrker jiulIil-s ,i particular component to the let. Later in the ietV assembly process, anulhtr 
wqrkrr removes the umc otmprmrni a™l discard* it. "Hi is extreme example of inefficiency 
illustrates the need to periodically step hack am.! look at pmcc-ws -w i wlnde rc i Inm- wi ll 
they wttiL 

Tltk analyyb is the process we use to examine the function! performed by someone using j 
compute] application. Tasks ate ihc specific functions that a user wants or needs to accom¬ 
plish using i he application. Examples cit tasks are losing in to a system, checking your e-mail, 
opening a 111 l' or imitating some transaction, and cheeking u report, 

Although many web^ito uxisl only for in formal ion.i I purpose'., more an I more com parties are 
delivering applications on the Web orvij a compams inlranel. An intranet is a private net 
work iniLhjii ail urbanization that allots employees to share Liiinpjiiv information and 
resources- 

I he mam advantages of network-based applications arc esse «(installation, ease of updating, 
and acccssibilitvtr>manv people. Because* these applications are installed on the Web nr com¬ 
pany imranel, all of its users are spared ihe burden of having to install and maintain them un 
individu.il Pt \ ui wnrksuuions, Administrators can update the applications . 1 * often asncces- 
sary without having n> ship new disks to users. And anyone who ]u. : . access to the Web or 
inti a net can use these applications. 

In many cases, processes clut uriginalb worked well become overburdened with add-ons and 
revisions. We have already seen how a software product can heynme nearly unusable due to 
feature crcep. Sometimes the people in charge of administering an application ate (00 dose to 
it to sec Iit>w its processes can be simplified .mil improved. 

Designing or w»n$a«ffng applications it one of the most challenging and rewarding pubs 
thm j user interface designer n. Lulled upon to do. Here are the basic steps required to under¬ 
stand users' tasks: 

1 . Identify the various lypes of users 

2 , For each user type, identify the lasks ami die context in which they -tie performed 
5. Create essential use cases to L>reak down each task 

a t re., te til wvc ha its 1 o il I u -t rale -ill 11 x. I,\ led U ska 

Well take a Juok al each of thntltcpt in further detail, and illustrate the points by looking at 
an example application. 
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identify the Various Types of Users 

In this step, we identify all of the types of user* who wiEt have <,outlet 
with the appli. I lion. Even if ? particular I s pc of user's access to tiie sys 
lein is very limited, we still intitule it in our lisi oi user types. 


For Each User Type, Identify the Tasks and the 
Content in Which They Are Performed 

When We analyze Lasb.. we need In understand them 111 the LOrttevl of 
I he users {often workers I who perform ihem wiihjn the environment 
m which ihey .ire performed, Specifically, vie seek answers to ihc fol- 
lowing questions. 



Once vflu have recorded the list 
□f tasks Foi each typo of us.ai,yuu 
mm create a useful table that 
shows ail of the tasks that all of 
the user types perform, fnci tiding 
information about how often 
each usar type accesses each 
task Inert item), you will have a 
complete view ol the tasks and 
their os age 


Whal tasks dees each type ol user perform? 

Uhi l-jilIj i that the user performs using, the Application. 

Tlw user's actual tasks maybe different tlui) rep resell led hv so meone else in ihc organization. 
Therefore, ir is important to make your own observations and question users yourself 

Hn* oflen is each task performed? 

FJclcrminr which lack- .irr lucked most often. Thai will help you decide how to priorithe- 
features when creating menus or other navigational dements. If possible, assign j percentage 
to each tusk to determine which tasks are accessed most ofleji, Determine what events are like 
ly to cause increases in certain types til tasks. 


Which tasks dc users find most difficult fa Learn and perform 7 

The answer to this question may tell you where you need lo focus your design skill to make 
complex or ditlkuli procedures simpler or more intuitive. 


In rih&S environment are She tasks performed? 

Deter nuns if there are dusty or luu.arJuii* tumJLtions or other environmental considerations 
that might .afted the usei > ability to perform the iask. t ihserve what other founts compete for 
■he ii'er"' attention while mi tin- ioh 
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Hdw does Ehe user learn Iti perform (he tasks? 

I Mfi tniiv if tli< ii <r ti.H'i ,1 mentor, rc.ul’ marmaK -ur iuM rtlrkidh through. Where does rhe 
i . -. i 1 |jf ii for help wlii^ji tilings diml work as ciptrctd? If theirs is j inculLir, iiy Ed irnn|S Ut 
^pcak to her Id dulcrniirK winds mi Uj emuf uitrb cite mmL diniquity. 


Whal other resources con the user access to perform tasks? 

Siinsc user* haw created “cheat cheers’ or other inform jJ lobaids to help them complete cer- 
i liu cnjtks. These can provide a great ujura of ideas for online performance support tools. 
Here is the lot of task!; for the three lype-v of usets we have LtlcnI ified : students, instructor^ 
Lilli-1 she JijjUICjl I I ltDf. 


A Simple Online Educational Delivery System Example 

To illustrate (he steps used to .lu.ih/c tasks* well use a simplified college online educational 
delivery system its an example. Lhe purpose of this new system is to allow students to take 
classes online via the Web. There are three types of users for this application: students* insiniL-- 
h-v ind .in idfil id i ■’tr.i lui In our application an instructor may also he the administrator. 
However, sibli! the rules ate different, we likIu Jl- them built is distiiii-L user types. 



Identify distinct user types tor 
soy group whose situation or 
needs is unique. For example if 
them were stti dents who 
accessed the course in a class¬ 
room setting and those that 
accessed rt from home, we 
would create two sepirate 
types' classroom students and 
remote students. 


Studenl Tasks 

■ Sell-register lor one or more courses 

■ Log in to the system 

' Iklcct which regi slered co u rse to access or stuilv m a given session 

■ He view instructor assignments for each registered course 

■ Qimmunicate with (he instructor of each registered course 

* Complete assignments such its reading, online practices* and exams 

■ He\ its* grades ior glided assignments 

* Revicw final grade for each <* hi i sc 

■ t.hai with other students atwin course materials and assignment 

* I ng out ol (lie system 


Inslfuctor Tasks 

* [ og in to the system 

* Review the ™*Eer for Ctcfc das to wh ich they dnvi cm gm\E 
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■ Assign readings. practice, and exarns to students 

■ Grade rams and |ir<»jeel k as neceMjiry 

* Communicate with the clamor individual student*, 

■ T’okS cstL-h hI udcill j iilkjl gr-uk- top |lie course 

* Communicate with I he administrator to reserve issuer 

- Communicate witliother instructors 

+ Change si nde-nr informal ion, ind utiing passwr>rd 

■ See grades and reporti fur eieh class and student 
+ I Of; out ot the system 

Administrator Tatks 

- Lug in to the system 

* Create classes 

■ Change tkns information 

* Add instructors lo system 

■ Assign instructors W» classes 

* Change instructor information 

* Delete instructors 

* Register students fm classes ifor lho«? students who da not self nej;isl er i 

* Transfer students from one etas* to mother 

■ Communicate with instructors 

* See reports for each class, instructor, and student 

* Change student inform,titun. including lussimml 

* Delete students 

■ Clear at end of l-jlIs semester 

■ Log out of the system 

System Tusks 

Wc h.Lve created task lists for each ol tin tun types of i.mr system, lull I here arc a number of 
oilier 1,i -.h -■ thill wl; |sjvc not vet listed. Those are I Ik tasks that ire the LespOnsiEuli tv ol ihe svs 
lean itself. These may include such areas as security, accessibility to users with specific disabil¬ 
ities, rapport for languages other than hngltsh, performance requirements, .and other respon 

Sibil it itfs. 


0? 


mg «r 

I TIP | 

Even r yen deci de not to crnuitn a 
separflte user lypa for the sys¬ 
tem requirements., make sure to 
record these require meins so 
that you can ref nr to them as 
needed 


hM 

H ed uc e you i imat use cases 

to the absolute amplest process 
wrh rhe fewest number of steps 
pass hie Constantly ask yoursell 
■F each slop yau have included is 
absolutely necessaiv to the cons- 
pletion oFthe usk. 
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To rniun." tliii I we don't forget these important tniiiideralionsi corsid- 
er including them in -■ tjsk Ini called "sysicm. This is- nui a u«r type, 
sui.li mi the student,. msUruclor, andsdnufllttHtot lifted above, but is a 
reposjtory for system responsibilities. Include in this list the tasks that 
the system mil nnd Ki accomplish, such as the following; 

- Keep all system passwords secure 

- Keep all penoual unformalioo secure 

■ Keep all muJ eiil perform,incc data secure from otter sLudenis And 
outsiders 

* Keep students Jmm viewing cadi other's performance data 
► MnLe lessons accessible to hearing ,inJ sight ini|’-tired iludfllls 


Create Essential Use Cases to Break Down Each Task 

To fully UildCHUnd I ampin Byttctni (unctjmn^dfbignerK often break 
each task down into its component actions, fan ’. Constantine And 
Lucs- Ijinkwuod, in their book, Software for Use A frames./ Cmj de to fire 
Models ami Methods of Usage Cnrfrmi fJfcjfpt !Addist)il-W«lev, 1999)i 
use the term essential use case In describe ,i method for recording 4Util 
an analysis. I lls- analysis. shuws the user’s inteiltkuls jisd the system s 
associated i'i-spi>nsihdi1 1 . Il inalxs ruj ussuinplHins aljoul whal ihe user 
interface will be. In feet, it is free of sny ranffion of technology, focus¬ 
ing instead on the actions them wives see 'Ll hies I Z, 4 \ -I -11. 

If we were Actually creating this application, w would create an ewn- 
li.il use case fur l-;ilIi user Usk lisied jlfcivc. To show this teclmk|ue, well 
select one of each user type's tasks and create an essential use tiise tor 
it. We use one card or one piece of paper fnr each essential use case. 
Notice that each essential use case covers- a tingle I Ask. Fur example, 

sHidfii!*. in i . I, i .il. v . nil ii ■• i ■ ii- ■! -m ;l| . .i, ■ !. ix It login 
system, but [he log - in procedure is coveted, in its own essential use oha. 
Therefore, it is not included in ibe tasks in fable 4->. 

These essential use cases imLI he most useful when we design I he indi¬ 
vidual screens of the new Application. We will reler kick to ihem to 
ensure that we are accnrnmnd.itnig. the necessary functionality fnr each 
i .ixl Si rue Llic number of cs.wmiIi.iI Lise cases for a complex application 
can become quill' Large, some ilesig.i um's like to store ihem jo separate 
stacks, tn gani/.ed by user tv pe. 
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4-2 The essiMial use c?se shows omv re necessary aspr in'emon* end sysuwh retportsibililits. 
T ins essentia- use ease breaks’ dmn ftr steps ol Pit Sudani co.DSFetu*g m online iruc'ice 

ej(erci 5 a 


ESSFIfTlAt USE CASE FDR STUDENT. COMPUTE ONLINE PRACTICE 

User jstudenti Intention 

System Responsibility 



Show cchhsm far which tlra student has registered 

□ 

Select cowrie 



ilFtfif assignments menu 

Select online practice activity 



Display questions el pracliee- activity 

Preyde answers tor practice actwity 



Sears student work 


Prescribe reading assignment in tnctbonk based or 
student's areas of ditlicoliv 

Vh'iA sl.:i- and prescribed •£» [idlings 



4-3 | This iTHCinh;tl um e*iu brftf ks rm shijis erf 1h& rngfructiif dunging 9 studsnti p-n5-^wc"il 


ESSENTIAL USE CASE FOR INSTRUCTOR; CHANGE STUDENT PASSWORD 

User (Instructor] Intention System RwspoiiSihilily 


Show gI^s^bs to will rh inftrucier is a-SSiSnisd 

Select class containing scudanito change 



Show list Of students lor selected cFnss 

Selecl student tu Change 



Shew mmu d studem qNlienS 

ShI«c 1 change student mformaliurt 



Display HuOMlt inter motion 

Chfinfle oassthTird 



Sava changes 























































































04 


| qe&l SflliPfl and neEtJs asmen-l | 


4-4 1 : «nl 1 1 ' '' iiiL r . I "i'l *■ lji !flc J|i M l -ati.- . v.iy ||1| Hr i il^Ss* ueLiil UJ fl 

class. 


ESSENTIAL USE CASE FOR ADMINISTRATOR: ASSIGN INSTRUCTOR TO CLASS 

User (Admanis-lrator! Intention System Responsibility 


Show list of classaS 

CraaEs ttess i - ncri tw list 


SdeCE iliits 



Show I15R nt inslnjclers m system 

Add instructor to system if niilM list 


AsS^ri inslFuiclar cd cUiss 



S-flvH LliiJisyes 


Create Flowcharts for AIL or Selected Tasks 

After you have created essential use caws for the- tasks von have identified for each user type, 
ihe air>■ r -iiep is to create flowchart* for these t.isls. Some designers prefer to flowchart .ill of 
I ■ laafcA to ensure that they unJersUnJ them affl^fed^ while Others flowchart complex 
Usb~those that ujiitiiirt one or more (kision joints and many steps. 

One ill the most important diagrams to create is one thin shows the overall How of liie weh- 
sueor wftwmc from a high-level perspective, This will help other* to un.ders.taud the System 
and sets the stage: fnr more detailed diagrams. When we actually create this flowchart. howev- 
rr, it mikes ihe flow seem Lonijdicatvd. One limitJliun ot the standard flowcharts is tlul they 
don't handle menus of l I mins. *l ! i* well. Figure 4-5 shows a flowchart of the lugh-lcvcl stu¬ 
dent view of the system, 

Nuliie Lhat a senes ot da i.sion diamonds attempts to comes tint tin- stodem has carious 
options to select from. Unfortunately, the diamond!; give ihc appearance oi a hierarch*-, They 
make it seem p it the student must first choose whether to complete an assignment before 
deciding whether to e mail I lw instructor or chat w ith other studi-nls. In fact, these might he 
menu options of buttons on a toolbar. 

Lhu g«ul is to make llie dull simpler and lu more accurately mJItvcy that these options will 
he presented to the student all at mice. Jo accomplish thts, we have modi tied the flowchart try 
replacing the seria- ol decision diamonds with .i har. I "he chokes me shown as rectangles con 
netted to The bar, which U wry similar to how option* 11V shown in the flow diagram we 
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examined in itic beginning ot ilm duptei h^ure-i-i), Nolioc that the lines thai connect the 
Iwr lo the reitun^lei> are drawn without arrowheads, since we do not want to imply any diiec- 
lion.il flow, 

I idlin' ‘l-<i shows the results, ,t diagram ihiil is k-,s lurm.iL lh.ui a flcnvibrtt hul easier to read! 
and understand. 


Flowchart of Student Functions 


/ ■ 

: B^n 



Simplified Flow Diagram of Student Functions 



4-5 


I -ns!; - if leweHlowchfi rT nt ?tii nem fu nctiini s 
savins ovartv cairn* t ■ 1 he isr >es. at riscii an 
ndmanas siio imp'ifc* ;i iwii d 16liy erf luntt ans 
lhru ,i n- sleaitny 


4-6 


Her r ■ dV'^i onl fervnv Ql lic^vir ;i I ! =i fc 4 -ip timiMihTvi o\ 

! ■ 4 5 Upttm tftt muft frt .pnhBHttet’ b u& * 

ly to l*ie w \\iq abu>i.Ti 35 rectanglrt sfliic-btrcl “to a 
be’ rV'uio- PuncH^ra; e'ioyyii m blauk we d^lti^nt Jted 
Irani rnte^aci* e tirefiis, d& cfaQUEing a 1 'jes. 
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{ . imLsjnm^ the power of the flowcharting symlmk with I he simple lank (if the flow diagram 
pivt-'i iji ihi- hcmTus of Liiit bs of these methods. Keep tn mind, however |h„n i lii^ mvllmd ■ '! 
combining les li|Mi|UC$ works heal with charts that show |J)l|ten)s functionality from a high' 
level view hinr more detailed studies,. a llowdtart is the preferable tool, 

figures 4 7 and 4 tf show the simplified high-level flowcharts for the Instructor and admims- 

ttalor views of the system. 

Notice in figure 4-8 that lines wiiluui arrowheads show relationships between functions, for 
example, if the administrator wants to a-^ign an instructor In a class t h ill has not yet been cre¬ 
ated, we will provide an easy means for the administrator to access the create-class function, 
then return lo the assign-instructor function. 

I'■me you have finished eie.itnisi Ili-wJi.irK flow outlines, and or Mow diagrams io .show ihe 
organ nation and flow of tasks, vou will have completed the requirements-definition stage of 
the process. You will have gained sufficient knowledge about your timers and their rusks ro 
begin grouping tlw various tasks in a way th.ii will lead to fi navigation si rue Lure for the web¬ 
site or software. 


Simplified Flow Diagram of instructor Function* 



Vpftri IChtrito 

r mid 
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Hk-i* -is Elbe simpl "«ec Haw d d^iam q \ mmew 

1 unt[!isn .1 
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Simplified Flow Digram of Admmistrater Funetkarrs J.g 



Hul-’ iu tllr Kim| 3 li“inn Flnw diB[jrniai 
»nf gdmin^^ftnjrfiincfiflns Thfi- 
alar - fEGlpi-flifiS mtlicnit primary 
^(ioiks,^h L+ie gray redan- 
Jes= Hkditata secondary ffinrfcs. 


-dll fcSInjJlkj* Add CltJ?:>: Add SfllUNE 

leS^WHi lfi$y«fci'i tftSftfffr; 


Aii^i 

fcnsl-jflfrp lz 


Rpffdl# 
3lii« ■£& fa 
tl«W3 


GROUPING AND PRIORITIZING TASKS 

Our IK’XI step is to uff ini/r the li^l l> 1 l-i^s h>r 1 ‘iidl user l¥]K (hitl they begin (U suggest ,i 
iljv ij^atiorid] slfLiLt l_.._ keeping Jit 193 j 11 J (Til' jll'cJ i uT uur Jiiilitiin:. LJesigEiciJi iipprodt.li ilui 
organisational step in difevnt ways. 1 find it useful to first group tasks, then prioritize them 
by mien 1 '■ueh ihe order in which functions are likely to he Attested And the frequency rlut 
they vi ill hr accessed. 


Grouping Tasks 

Well star! by grouping tasks by hinction, using the jdinimstrulor Ldsk> lifted earlier it! this 
chapter as our example. 


Administrator Ta&k$ 

■ log in ro the svMern 

■ Croteduscij 

* Change dw information 


















* Add instrudnix, to system 

* Assign instrMClori todas&es 

* < ihvi ope instructor i n(orm^ Hon 

* Delete instructors 

+ KegistST students ft>r desses • rnr those students who do not selt-Tester > 

* Transfer hlLulLolh sVi.nn 0114: da» Lo another 

* (lomnwmicifee with instructors 

* Se>; reports lor cadi class, iiLhlruclor, ind student 

* c Ill.! Itg£ St tident infnmvH ion, ind tiding password 
+ l ilear classes ill end of each semester 

* ! ,og out of the system 

Interviews with the intended nd mini Orators of the system indicated that they ejrpert lo use 
• ■ ••: 1 ■:■ 1 hi'tiviljj &t tilt beginning of each term hut miusl* sporadically uiict 11 1:^ miEi.il pen 
J i A- .11V1I.111 miM .iHiMs lUi-m tosliuckly thu 1 11:11 tux.. j he .11L: im;- 

i-itj jtors we spoke with like to have functions organized by group—i.e„ instructors, students,, 
classes, etc. Therefore, we will begin by arranging tasks according 10 their constituent groups. 

Class Tasks 

* Create cla.ws 

* CJiangje class information 

* Clear classes tit end of each semester 

Instructor Tasks 

* Add instructors to system 

* .Assign instructors to classes 

* Change instructor inlmrni.ilton 

* Delete instructors 

Student Tasks 

■ Heeler students lor classes 

* Change student information, including |l<U6Ht>Ki 
- I delete students 

* TiMiisfer students from one lLiss t<■ .hhjcIh-i 
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Mi$ctllanegus Tasks 

» Login 

■ < 'jom mimicate wffil instrut to rs 

■ Ve reports r'oi each does, instructor; and student 
* I^wof ihf liyflem 

It U mu difficult in see how these groupings might siiggt'si n flnw mid 
menu structtii* lor the jJnijntsLr.mir view of this application. Hif 
administrator will begin by accessing a particular Web page, where he 
will be required to log in with ,i wr identification and password. The 
nest page displayed could display il primary or mo in menu with ike 
following chokes: 

I. Student Fumbib 

2 CIiuncs Functions 

't Instructor T unctions 



Some designers ureter to write 
dnwn system femures an indflx 
cards, one fanclian per card. 
They develop (tie prgenifBUcm ol 
(tia new system by sorting [he 
cards irvfn piles, moving cards 
bnm one pile to anottiei e» need¬ 
ed Such a system may a ! su be 
used doi ng usability tasting to 
enable users to indicate which 
functions they aspect to be 
grouped together. This informa¬ 
tion is used to devolap the navi> 
giiion system For the software or 
website- 


4. Reports 

This is just one way That th is application Could lx 1 m'gani/cd — il in hy no means the only way. 
We will Ji^us? navigation moic thoroughly m Chapter 7. Although not extrcnidy critical in 
this application:, we should give some thoughr to the order of menu items cm the main menu. 
If wr consider the order in which i he administrator is likely to use these functions fin the first 
time, the administrator could either first urcate then assign instructors lo those class 

l-:- or aJii iusLruClLJJs Ijjx, then Lbs*eE. Students can sdf register, bul the aJissimslraLor can 
also add them to the system. Therefore, there is no dear order suggested by the sequence of 
access. 


As, for fi'pquency of 4 c<ess over rime, the instructor may be called upon lo help studentu who 
arc having difficulty fogging in lo the system, The instructor wail hawe ihe ability to charge 
student inliiriiMiiciiE, Im- kidfog passwords, but theadministrator may haw to assist with these 
tasks. At the end of each icrm, the administrator will have to dear out each class lo prepare 
for the nesl term. Once again, tin tss^k emeses as the dear most - frcqucntl y-accessed winner 

We have shown the order .is Student Functions, filasMis I'unclions. and Instructor hi in* Mow. 
since this is a logit si I w,iy lo thmlr .llsout the IjhLs. Sludcn.lv are the vnullciu “unil 1 * vf QIC sys¬ 
tem. Students are grouped to form da-sses. Instructors are as.vLgjMid lo classes. Assuming llul 

no better alternative is [orthcomlng, this menu order should be tested on users in the carl* 
si ages of design to determine its fitness. 

The ildniristrator I lb eh In want to he nbletn comTHlinLc.ife with instructors from any p Ip 
nf the application, so we shun Id plan to include il throughout the application- Similarly, we 
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will probably include a Log Off link or button on every page, rather than forcing the admin- 
isiniim-uj return \a the homepage in order to Itigot'f. 

As we have seen,analyzing the intended audience and ti^ks. of a website, multimedia software, 
or application lead* 1 hr designer u? 4 more complete knowledge, which tf nvc lb i n Hue nets 1 he 
quafily of the Jnign. In the matt chapter, we will Tkliili gv4r*3 bit and tufJi (>u,r it Lennon lo the 
exciting topics ml creativity jiuL idea generation. 



* Flow diagrams, website- and software maps, and flowcharts are useful toots lor conWhuniesung 
the structure of an existing or proposed websrte or software product. 

* Designers use surveys, interviews, direct observation and nqurry. personas, and user stones la 
learn about the target audiences for websites or software The type of project and accessibility 
nl the target audience delw mines which techniques to use. 

* Surveys are useful far collecting users' opinions and recommendations Ceretolly worded ques¬ 
tions yield useful ii 1 1 nr in all on. 

* A site visit gives you the opportunity to observe and interview users as they perform tasks or 
jobs. 

* Designers sometimes create personas, which are hctbnal people who represent the different 
types of users ol a wehfiile or sullwure producl., to keep the needs ul then audience n irind 
throughout the design process. 

* A eonieirtua I inquiry gives iha designer the npponuri icy m observe wo rM rs as they pertor m |h h.t 
tasks and to ask questions based an these observations 

* A designer performs a task analysis lu undei stand the steps a worker or system performs to 
accomplish goals The task analyse is often used in redesigning the task to make if easier or 
more efficient 


Grouping and pr-onimrq lasks often suggests a navigalmn structure for the new or redesigned 
iipplic alian 
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in review 


I - Of srte/software outlines and flow diagrams, which can most eBsify accommodate 
Hie designer's notes? 

Whet a nr ihe major edvanterjes ol a sue soltware map ? 1 

What are some examples of valuable sunrey questions >o ask a site's visitors? 

■ Whei is a persona., and how can it help us design hotter sites and software? 

Why 5 it important lor an essentia! use case Id aunid references to technology? 

Hr/w does a Cosigner manipulate e task list For s user type to suggest a navigational 
StniClure? 


exercise 


You rave been asked m create a website that offers Web cos gn sli denis a cont- 
munnyior interacting with each other ar-d with instructors and professionals in the 
Mold. Develop two different personas representing students vitio are likely to use the 
sile. Inlflmww nnei cir rrnrei o\ yaur clas&maEB5 Id hulp devulup the psisonaE 
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objectives 

£k amine ah&tndu* fa cmtlivity »nd huw la farnjfk. rht.im 

Analyze and pranl ce useful Icchniqiids Idt flEUEratinfl new ideas 

Apply these iittlm-siLwi to &dIvq (Pteffaae problems a«iiS add value iu software 

IraliiaK ideas 10 dulttiAini which ulfer the tmsl chance «I succor 

De&clihe hew In cnn-igd and participate id group b?aidHtannnifl sessions 


introduction 

Onto w* jnjilyjfril the flirods. of aur 4cif1i^nC^ and the in sis Chit they perlorm, the temptation 
is very ■strong lo dive ngtn m and start drawing street'; Bm told on a minute! - The business of 
designing ^eb^itefc ir'id rrultjnitilia scKwurO IS- all about solving prciilems a-inl adding valu? lor the 
banebi ftf |ht: h uili^nf! ■= • d«*igiw, ynu turn rmmy oppiKtunftlci tu cmetiImm *dvm lhm havo 

direct impart or :hR user experience With so much poleed-nlly at stake, how r.m you eonsisififllly 

conwijp with- tli^SV •IISi^|i[fl ■ |_irrjb'hMVi sofriry liJ^ilS? 


To find out, first stusv jb yam troubles aw*'/, pul oil yudr b y i-ed dMtfs nfi£e. and y-u-L duwii to die 
senoiisly wacky businn-ss nl -ci^.nivityl All bf in. W* horn erupiivi 1 With h .1 faui yn.sr diliJ iiwrmt 
games With a leaf end softh? drrc Listen to a seven-year nkl s-mp a snng ghe just made up ah out her 
broiler s #y*frrflwi_ feu have a wonderful im^inaoon diet -ms deigned ^or coming up wnh useful 
nth* idem 

Sy itir? tinwi Wr- r «• =i 1- ^ sduHhoed, rto gh. many of us hnwi tfirgotlnn Thai *vr? nver had a rnBahve spark 
■ngide iig in^eari, we've learned lo iilterrialiiB Hm> jirdijameiHS ;r!d criVG-iiim tfialthe vvoetd to&|H 
fin u£, pGlhapS- trti hiving lhai w have nothing new or va lu itble to c ontn butts Mow ifs tirTit In (ighl 
ii : i 1:1. and top mil that creative child inside all us 



CREATIVITY AND IDEA 
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I'M NOT CREATIVE. SO DO I HAVE TO DO THIS? 

Perhaps your |iwvii:iiis attempt* .il Crtfllivc pnoMem wiving luvy been Il-^s ih.ir suete^sful, 
WIll'ci faced with the ndrd lot L I l‘Vlt, new ideas, tics you toJKiEld to the chdk'ng.e by vacuum ■ 
bij; your ruunii' Are you convinced tliat hti*Tuf thinking r^uirei a football? I\i most of your 
group hramsiorniirig sessions end when someone calk the |'olice? 

Never ie.ir! I : quipped with some handv rerchmiqucH- and a little pradu-e. anyone tan learn 10 
tap into hit own otMjtv Wi* will start nur f o umey hv looking at wtwrt keeps us 

ftotis Iwiiijj Ja creative a> we l.im be Then Well ind inluM- ... piuvcn tcchiUqueH for bie.if. 

ing down them obatade* and letting our creative energy flow. Along tliv way we II show how 
creative pnoWein solv ing technique:, ,-jn add real value co the wehsitesatid sofimre wr design- 


OBSTACLES TO CREATIVITY 

I in- fast lh-.ii you are readim: h '••• I’mw, 1 1 ■ i .n.i . c .1 Miiovur. Tii tins isicnntjil, you 
have managed Lm handle all llul life has thrown ill yo-iLJUld joUi very existence is i.Mng proof 
of your success. I low did you manage to nuke it this far? 


Conformity 

(>ne answer <0 this question is mnfarmifi Wo were -ill laughl from an ?htW age to follow ihv 
rules, along 10 get along. I h>ii t touch that! Slav out of the stncel! keep your hands 1 o yonr- 
sdl-Ciet luck inline! Anyone who l-vl-i ujlkixl 111 from of a moving cat Iuiciwk that rules aren't 
a|| lud. i juifm tninp m oan s Li ih and norms ol'safely and lieahk keps us from hurting our¬ 
selves and others, while allowing us to live reasonable harmoniously in socielv. 

But over lime, our emphasis on following rules keeps us from expresshig our creative selves. 
Creativity runs counter to convention hv definition, lo innovate is to create wnneihiiig new 
and different from what preceded t(. Therefore, in order to escape from our'‘normal’ thought 
p.LLki 11 . ivv Tv.,-1..iv uiiimgu .n .1 .1 v 11.1 11 •.. ih il h-.Ihuu uqubvadiaiwefunk 
differently. 

Single Best Solution Orientation 

VtV jtc programmed lo find the single Ihm solution iu ,i i^iven ^ruHem or ■. hallrnfif: I iv this 
product instead ot rliat one because 1 ec wmb belter Take this mule instead of th,it ont 1 to avoid 
ihe traffic und ifrive aooner. A«k Aliie, bnw lilt edw«p knows the righi .mmcr. \W- .lh- 
aIwm n .ilrrL Nn ilie single Lnl'^C HifuUoii lo Ai\y question tir problem. E ikcwiju.*, hvc Jit- uy|.KTl At 

judging possible solLiliorii m order to eliimiuie Lhu^ ieui Uun't make iho grade, 
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1 1lls j Line ,ind litvc^u i strategy lol Solving. simple, eVcrydm problems. Hut sob mg jlie 
reallv lough problems or CGEEiiug up with truly creative ideas requires a totally different 
approach. To think creatively is to begin b> embracing wrong answers .is much as right ones 
In f,Kt h lo be creative, wr apply techniques spiM.Lik.ilk designed m produce wrong, inappro¬ 
priate, ouilandislij lUmwrnsicAl. .mil impossible solutions to our problem. ‘I his. IkIjh us I inti 
practical solutions ih.it we never would have considered otherwise, 


Being Directly from Here Id There 

Look ill tire difference hot ween the way adults and children get to where they are going. Ad lifts 

race lo get from point A tO ..(1 B Bl qilidh .md diu-nly .is pnssiNi-. < ihililrc. ii, I hough nice 

Huumpiidied ineailderei's, stopping to explore am Limit- and ever * lllinj! Llut catches Llicii 
interetil. '1 hev seem to loot for reasons not to get where they're going. 

Creative thinking ret]uires that we act more like children by Inking nur time and thousing I he 
less truvefed road, Great ideas aren’t found h* racing down tire wide avenues. It is the small, 
hidden paths 1li.it lead us 10 umspeH.fcd and irhcha tiling desl irLiUdii s„ It may lake Us J little 
longer lo get there, hut die journey and. the potential result* are worth Lt. 


Fear of Failure 

The single gremesi impediment to cneativitv is the fear of sounding or 
ii'i’pv-i i :riy si lipid \1 though ii is sometimes true that mu wool fail or 
be ridiculed if you don't take a rink, yoil also won’t gel very fur. It take* 
courage lo express your idea* out loud. You have to be prepared to 
hear,“That isn't practical"or'We tried your ides before, and it didn't 
work.” 

The key lo creative success is not confusing your ideas with your sdf, 
A rejection of your idea is tiui .■ rejection of you or an indictment of 
your creative abilities. There are many reasons u lv. ideas arc rejected, 
many lhai are completely beyond your control. It might not lie the 
right timing, the right situation, or the light solution i,«irn from |hc 
rejection and keep trying. If your idea doesn’t pan nut, don't WOtryl 
You cun always conn? up with new ideas, hist going through the pmcess 
of innovating, ch(wising workable ideas, and showing your idea Ur oth¬ 
ers ii beneficial. And you never know when one of your ideas will prove 
I Li be truly magical. 



It you can't think of a single idea, 
then (Kink of a hundred ideas. 
SumaLimes our search Foi the 
perfect idea keeps us iron tliilik¬ 
ing at any ideas A great way lo 
get unstuck is In f&rce yourself to 
write dawn lots ol flnns. ei sen iF 
many of ihem are just me rline™ 
Allowing youiself to L™ lass than 
brilliant will help nurture your 
GTeairvity. 



n 


vi!y 
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Thinking You Were Bom Uncreative 

^'h. n Robert k. Merlon, [he Lice aictolngist and professor, coined the phrase self iulfiiim# 
prophecy, he could well have been describing people who declare themselves uncreative, It's 
trite. If you think yourself uncrcjlive, then you hvj|| Ik- If you declare your brain incapable of 
original thought, tlu-n it v,1 11 do i ts best lu comply. 

For those win i lall into this category. at leasL it \ some of the techniques described in thn Lh.ip- 
[er. Don 1 ! just read about them, but apply them to a problem that uni would Like to solve, 

■ i . s:." h.uv fort with ihem I-’ you were wrao£and yoi\ rc.iilv We I'uvi- a civ.it hi? bone i 
your iWy. then you will haw learned something wry valuable nhotil ft >UTvell. Lin the other 
hand, if yoiulrr Mill unable to generate .1 single 1 realise- idr-a after Irving the techniquesdis¬ 
cussed listed. here, you will at least have ihe satisfaction oi saying "l (old you so-' 


TECHNIQUES FOR GENERATING NEW IDEAS 

r-or years creativity enhancement technique* have been used successfully by th.vsc whose 
livelihood depend* on their ability to generate new idea.*. I mentor*, advertising people, scien¬ 
tists, and artists ctunc 10 mind instantly, but people who can create useful ideas art highly 
prijied in every field. 

A nujnber of pioneers and authorities in the study of creativity are responsible for many of 
the techniques discussed in I his section. E'or example. Edward de Bono introduced the term 
lateral thinking in l^h“ According to Mr, dtf Bono, You cannot dig .1 hole ir ,1 different place 
hy Jiggi eye Lhe j j me Lmk dee pc r" The message is clear—to come up wit h J iJlet en L resu I ts we 
Liuft just trV harder m the same direction; we have to Jjctrr^L dinn-liem. 

Alex Osborn, j pioneer tejclier of creativity, devised a number of Lechn iq li l-c Ills work w.n 
later muddied by Boh F.berle and further descrilwd in Michael Mklialko's book. rPWffkfrftfJ*, 
published by Ten 'speed: Press. You might alcn enjoy Rogpr Von Geth’s .4 tifirtffr an the Side of 
the Ifc'itii - Warner Books} or 4 knit in rite ,S*vrf of fire /'iirrrc (Harper Collins), 

Creativity techniques work by forcing us out of our normal context. They have ils twbi our 
problem every winch way, Look at it from different points of view, .stretch it, dii ink it, dissect 
it, and morph it. 

AU of the techniques included in iH uh section can be used to generate workable ideas that can 
he applied to website* nr multimedia software- Of course, we a re mod interested in devising 
new, pvwverfuI wavs In connect the user ro a system's functifntiililv But in lhe pmcccs ofvmir 
work, you will likely find vaurself creating idea* fm n. ^c I. .1 Hires and capabilities tli.it vow 
client 1 n. 1 v Jiud valuable. These ideas may be more accurately categorized as marketingidfai 
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than pun: interface suggestions, lun 
iIil' Cv'i are uftfji Uascly linked 


Sharing such suggestions with 
diems can help strengthen 
ihv working relali^iliip 
a tut makes the project 
inudh more rewarding. 

Although the techniques 
may seem a hit strange at 
first, wiih practice they 
will become like old 
friends. It yx>u find that a 
particular technique dots 
not help ynu produce U$v 
la I solutions it> vour prob¬ 
lem. then try others. You will 
soon hegm to learn which tech¬ 
nique is Likely to work best in a 
given situation. 



In Lise these techniques, start by dcllaiing, js specifically as possible, tine problem you want to 
solve. As philosopher John Dewey said, "A problem well stated is half solved.. ’ Ei is not enough 
tn describe your problem jpI want to make this website belter." You have to be abk to slate 
iron- you want ii to hr heller. The following -■« some examples of reasonably mll-iuiiuil 
problems: 


* "[ is j ill lo make ii incredibly easy toj online shoppers lo conip.iic similar its ms so tliiiL 11 1 l-- 

can select the one that best satisfies their needs/ 


* Hl | need a mnre intuitive way to allow users Lo selett jiurlion sizes of I nods w> tfuil I hey can 
see [111 nutritional conlenl .’ 


■ " | want each potential client who views our portfolio to see I he projects we've WOi ked on 

that are moil like their needs." 

* "I need a way to provide con text -sensitive uitoj iiijuoji to my users TIP 

without them having to search through an entire Help file. - 


' f need h' sliuiv students, at a glance„ tin. changes th.it oecu] in pied 
a tor and prey populations in each genera Liu it. 

^ hive ■ ou have Stated clearly the problem > ou watil Lo solve, it s time to 
apply ihe Il-l bnir|ues and see what kind* of ideas you can generate. 


Df&ativflv techniques work hest 

Vzhon yunr nritorin is Thai flnythrnjy 
is passible Use them wivi ll u ‘..I 
eupectation that you wMpioduce 
ideas lb at will solve your problem. 
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The “Ho Constraints" Technique 

Thc‘ l uii cuiistmLnlif technique is j gre.it Itthnitilit 1 lu use when you want in cit-ale powerful 
nth feature ideas. IV ideas it presduceH iilidi can be converltd lo workable solutions. Iuse 
[hit technique. yourself the following question:" I low would I solve this problem if there 
were nocomtramts to consider?" 

If there lire no conitrauriU, then your solution does iwe need to frt within ihe confines of a 
computer. You e*n ignore such pesky physical limtuuiofis as time, space, money, and 
resources. If you tan read minds* conjure up helpful people and objects,, and 

insiamly transport yourself eo whatever destination you wish, 

Now let's ui applying this Lpl1 1 nique to develop idea* for tohinj a red problem. bmee this 
technique works co we;! on suggesting new features. we li sjy 'Hir client's goal K li> improve 
online sales at a website that sells specialty gourmet foods. Onr question is "1 Tow could get 
people Lu buy more gourmet food Heins it' there were iki const ruinls Limiting us?" 

As you ihink about possible answers to Eh is question, remember not lo mdge a in i ■ I ihe ideas 
yet. Premature judgc-menl (.an .stop the idea generation process colj. Record your answers, to 
ihe qnation-. When I asked myself the question, I came up with the following unconstrained 
ways lo get people to hoy more items 

1 Each time someone bought one ilem. they also bought ail ! he other items that went along 
with that item, For example, if someone puwhA.sed. gourmet crackers, they also bought vat- 
ioils cheeses, jellies, .md other things Lo spread on tliem, plus other appetieeis, hoi* <J'oeu¬ 
vres. etc. 

2 F-ieh timeo shopper looked at an item, a customer who had already bought Unit item mag¬ 
ically appeared md told the shopper how great the item was. 

3. instead of customers having in access the site, the site would send items to the shopper's 
home that could be purchased, 

4 Livery time someone bought an iirui, every other shopper would V notified. 

5. Every time someone bought an item* they would automatically buy 10Q of the item instead 
nf)Mst one, 

rhi- 111 %l -v!'|■ i'li* x liis■ i■ i 6 f. n vi ■ r .in Wi "s "i ■ -.-i I ■■■in :F lj o: hi i .in lie :lr-ui.| A'. II 
use the list above, and >oli cart use the ideas you generated. Lei's start with Ihe Jlrst item and 
gp Jtiwn the Itsl. 

i. Each, time someone bought one item, they Also bought all the ot her Herns that went Along 
wnh ihai item. For example, if someone purchased gourmet crackers, they o.lso bought var¬ 
ious cheeses, idlies, And other things to spread on them, plus other appelirers, hors d'oeu- 
vtfs, etc. 
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This idea might lead u> io smioniatk.il Hy suggest related items when a shopper selects a par¬ 
ticular item to examine or purchase on the site. We might ,dso offer .1 com pL-l liny. iheme, such 
ll <1 "Spring Lake Picnic,* contain ins several related tie ms, siiih as cr ackers, cheese, fruit, and 
a hotlle of WHif- 

2. Each time a sltu|i}vr looked it oil item, a cuslomcr who had already bought llul item mag 
] e-.i 11 ■■ appealed and told the shop get how great tin- item was. 

Although making <1 happy oMhmwSMyttlly appear" might prove diiUcul t. ye could cer¬ 
tainly in dude positive eommeiui from actual customers on item description pages. Vft could 
invite buyers to give us feedbackabout. the items they purchase, and ask those who wrote espe¬ 
cially enthusiastic reviews to give us permission to use their comments on ihe siie. 




3. Instead of customers having to access the site, the site would send items to 
the shopper's home that could he purchased 

With visitors' consent, we could send oui periodic e-mails advertising new 
products, Special discount niter',, and other promotions. 


This idea might lead ns to niter incentives to shoppers 
to purchase items in higher volume. Fw example, 
Lvl 1 might prtouic disco uni 1 , for multiple item 
purdiiHrt or free shipping on laigvr order*. 

In the space uf about Ju or 13 m mules, we 
haw generated five reasonable ideas to help 
improve sales ai l he website. You may have 
mine up with different answers thjl may have 


4- Every time someone bought an item, every other shopper would be 
notified, 

Although Our tir.m impulse might be lo reject this idea instantly, perhaps we 
can ittst rwist it slightlv m wring something useful out of it, Eor example, 
notifying every other shopper might mean that wv publish 1 ItM of tilt* 
best-selling Hems prominently on the website. This might entice shop- 
|w> to purchase items they had never previously thoughL to try, taking 
this a step farther, we com Id provide different top-10 lists for different 
parts of the country (nr world)- Shoppers could see what were the nnnsi 
popular Hems in different areas juJ 1>l- exposed Lo a larger nwatwr of acek 
lent products. 


5. Every time someone bought an hem, (hey would automatically bn-. 
100 of the item instead of lust Otic. 
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Ll-lL . i »le Eu ideas that miglm Ik wit Midi. su..Lrs:-!ul tliatl those listed Iuti;- Your dji-nl nuy he 
impressed enough to ask you and your team to help imfiJeflient one or more of them, The key 
was dicing a different hole tarher than j-u-st dicing farther in the same one. Lei s a>minue on 
luji journey, 

A variation of the no constraint* technique U the "ccHuEninls" U'L Ini in] n l'. instead of remov¬ 
ing all <cni.slraims, you iiilmduic; constfaint* lo see how they might influence a 

silnuon. hu example. using the gourmet lood scenario, we nught ask ourselves how we nujdiL 
sell more 1 products if all of our customers suddenly bewoe v^ttariim. Iliis might lead us to 
a nijmix'T of ideas: 

■ Allow users to displav just rlmsc londs dur ;u commodate a particular diet restriction or 
preference. 

■ Include special icons, such as sugar free, wheat live, and meal tree to identity those prod¬ 
ucts wherever they are displayed. 

* Include full nutrition information for all of our products. 

* Provide link*, in related site:, for people who request foods that accommodate a particular 
diet restriction, far example, (hose requesting vegetarian Ms could he shown ,1 list of 
Imki Eo vegetarian organizations and sites. 


The ' Brsak the Rules Technique 

When Du apply the "break the rules" technique you ask the question. W hat is I lie Last thing 
on l-.jrrh dim s. .ntin ne a th -■ i su wi uld d . i. M-h i his pn*h mi? Vfc slit I MUl| fartho« 
ideas that defy kipc —that run counter to conventional wisdom, rules, or standard^ of appro¬ 
priate hch.iviiiif. In short, we want ideas that break all the rules! 


To illustrate luw to ap]dy this technique, let’s say that you are redesign i mg 3 website for a cum- 
[Mnv lhal manufactures printers for small budnessca and consumers. They oiler 12 dUlererit 
models ringing from modest ink pet prin ters all the way to high speed laser printers. Each 
printer has a different feature set and price that carpels it to a specific 
audience. 



Grant id*as ran come along at 
any t meaF the day or night. Kuuji 
a nfrtebook and pencil handy to 
record your ideas. The-o is noth 
ing mine frustrating than getting 
a lemtjc idea hut tonnertinfl what 
it was betorn you had a chance 
to wuto it down 


Tile current site includes ,i table l h.il lists the failures of each printer, 
lull visitors So the site have complained that they still find tl difficult to 
Figure out which printer Ik'sI suib their needs. How ..„ni we redesign 
E 11s tujic . I nuke i: casit i- r promt. iive . iHtffffH i s p o. huose the 
right printer? 

I’siilg the break ihe rules method. VO ask our&efaes, “Uhai is the last 
[hi rig on F.arth wed want to do In help customers sefaa the printer th.U 

matches their needs?" Heie are suine though h ill..- into my tnind. 

Oiue again. your idt-a* mav hi- itiili-rvHt ti<un (Jicm 
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I. Try to convirw customers that I hey don't really Want a printer and .hIhiw them 50I1K OrtitCf 
office equipment instead, sui.li as j paper shredder. 

1. Try to convince them that we don't offer a printer that meets their needs, 

3. Show customers the printers we oiler w loch ifoirV meet their needs-. 

■i Have aboul our competitor's primers and provide ,i link to rAcj'r site, 

5. Mix up alt ol the primers and their descriptions sc customers have no idea which primers 
offer which features. 

Now lei's look over these suggestions to see il we can find jiw who.u among ihe chaff 

ry to convince customers that rhey Jonh really warn ,i primer and show them some other 
office equipment instead, such as a paper '.hTietfcIcT. 

Although this suggestion might lead us-ioadsi.se the customer how they can get more tile out 
of their existing printer, l cant think ol a wav that this will hdpthem choose the right printer. 

2. Try to convince them that we don't offer a printer that meets their needs. 

Perhaps our approach will let customers know if we do no-L offer a punier that meets their 
needs, bui ihi* still doesn't help us figure out how to help them choose the right printer. 

X Show customers the printers we offer which don't meet their needs, 

At fii'sl ihis -. n a lot like the second idea. As I w.u 1 hi liking about il. though. ,in image of 
lights dashing on and off came to me, and I thought of an idea, The problem with most prod 
UCt feature grids IS lh.it you must read evert grid cell to determine if the lealure iL describes 
matches your needs, hv the time vnu have finished, you often find that no product meets all 
of your needs, and you may not Lw sure which prodiM v-m-, the closest match. 

Why not create a smart, easy to-use. interactive grid that shows clearly which printers 
meet and don’t meet the user's criteria l Our grids first column wall contain a list ol 
criteria used to select a primer, fcach row contains a different criteri¬ 
on, such as initial cost, color or Hack and white, print speed, enve¬ 
lope feed nr other special lean ires, operating 
costs, etc, lijch column after the ftrsl one is 
for each priFiler model, [f a particular print¬ 
er meets a given requirement, then the cell 
n the intersection of that requirement row 
and prinlei column is highlighted in some 
fashion^! ike a light turned on—that 
makes il stand out dearly. This is mir way of 
indicating thal the printer ,o tlu- lop of thin 
solumin mills this particular rcquirrmcnl. 
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When the grid is first displayed, nunc ol the tells iltr highlighted. Ul h N uy the first row is for 
selo-ting •■', |lll litr i he printer dirauid suj.ipi.trl bkk jilJ wJute or CuJul priming, The IJUI or 
last choice lor each requirement b"Mn Preference" or something similar, If the user selects this 
choice, then all of (he cells in that TO-w aw highlighted- In mir rase. the user selects“«!»“ SO 
jus I i hr sells in tlut tow that are in cohnnm headed h\ primers with Color-pri nli ngcapifciti- 
lin become highlighted- 

The user tuiuinues sckiiing criteria. Wlveri finislied, il a printer nunts all of ilw users Lriic- 
iij, then that printers icon <u. the lop of the oftlumn is higliJjyhtcd. Il no printer meets all ot 
the user’s requirements, then I he primers with the most cells in tlieirCftluntitt highlighted are 
likclv |o he the best choices. OF course, if the user has a particular requirement 1 hit must he 
met, (hen the ijvlt can just consider rice printers that meet that requirement. Figure 5+1 shows 
a wireframe diagram of this idea- 

When Inst displaying the grid, we coukl initially highlight allot the cells instead ot highlight¬ 
ing none of them. I his entails setting the default value for each requirement to the “No 
Preference" choice. Then, as the user selects criteria, we remove the highlight for those cells 
mid printers ch.it did not men the criteria. One possible liis.icK nlagc of this approach is th.it 
it might be' a bit o^ei'whelming lu see everything Jit ,:| when the cud is first displayed. |l also 
might he inure eluting (and better ftijin a marketing pcispcclwc fur ihe u«T to sec choices 
lighting up rather than dimming as select ions arc made. 

Il necessary, ihe order of the grid can be switched so That the products are listed along lhe side, 
nnd «hc user makes sdecrirans.it the top of each column. In that ea«, rows with the most high¬ 
lighted celts are the rants lh.il Minsk I lie gri -iU O miiilbei iH the user’s reqLtirciUenls. Keeping 


5-1 


Simplified Printer Sclerlur 
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in mind iIj.il am goal is to show the cm ire grid without scrolling lJ possible lIic number of 
criteria and the number of products will help dictate ihe hcjii orientation. 

Well h we g,oi pood mileage hum that idea" Actually, we probably dtwuJd have examined ihe 
final two ideas before devoting so much i ime and effort to this one.bat that is easier said than 
dotie. When ideas take no * life of their own, sometime* we just htvc to follow when.’ they lead. 
Lei 's finish looking at the ml of the ideas. 

-1. K-ive about our competiftoj' s primers and provide a link Ii.i j/jcjr sile. 

Although this idea is sure (ajctltnlt good will among oilr cusl nnier*, il still won't help them 
select the light p mi ter for their iweds, 

5. M ix up all of the printers and their descriptions so customers hive no idea which printers 
offer winch features. 

This might suggest creeling j concentration-style game where the user must match j punter 
to ils foattiFcs. Although this may bean interestingapproach,! know from my own experience 
that people who are I Tying In nuke ;i buying decision iIoji’i want obstacles placed in then- 
path. Although there is j time ami place for enle naming games, this is probably not it. 

It should he clear from ou rdiw u u ioi t of this technique that corning up with usable ideas can 
he a htt-or-miv; proposition- t)ur "hit rue” was only one out of five, and yet this statistic isui 
all dial imptsuant. Thinking of one redly good idea wi] quickly make you forget .iKmt al the 
bad onesf 

The “Reversal" Technique 

T lie reversal technique is useful in a variety of situations. The beauty of the reversal technique 
isth.ii it is very eis;. to jpplv. fo :.mc y iic; nill K&tiion*. you simply rtwnt youi ptol Il. i <i 
situation, for example: 

* What if, instead ol asking users lor Llietr telephone 
numbers via e-mail. we asked them for their e-mail 
addresses via telephone? 

r What it, instead ol asking users to find the I unction* 
they need, wc found out what functions users need¬ 
ed most and just presented those' 

* What il', instead of hat ing uscj s iwigani lo different 
screens, we bad Lhe users stay on one screen and 
brought bmtlions lo them' 

He re is ,io example m herts we used the reversal tech¬ 
nique to help solve a problem. Olir Ec,irn was working, 














m 


imi m Hhnr 



mi the design nl sunn- wvb-h&seJ interactive luilh tuuls. t he luols wtw j splits tsf i irimil 
jrutnifmicKiitHuOr computeriz'd version!. nl I he mump da tives, siich an sptTUK'ri and mats, used 
in many -.chncils m allow students tn experinKrnf with various math concepts. We were think¬ 
ing of wjy\ Hi increase the tools' flexibility and of UK for both students und Ifadwrs.. 
I-.llciJ with this issue, we applied [he* reversal technique 1o iheprobkm. 

Wr JsLeJ„“Whj1 if, itTvIead of selecting, Help l‘PoL1l within the malh Louis. Users selected the 
took from within Hclpt"! his led n> the idea »i creating online lessons (the Help'} ihjl wr- 
i.lined links to rbe tools. students could read the lesson., come to a math pctiblem, and dick 
lhr link lo PCCCSI I he appropriate tool that w,ii needed to aoht the probtrin. This i pp p o n d l 
emphasizes ihe lesson Mthci I kill tile li»i which makes it easier for teachers lo understand 
and ensures that students select the correct tod for each situation. 


Driving Home the Message 


HOW CREATIVITY TECHNIQUES CAN INSPIRE MEMORABLE TV ACS 

As you become la miliar with thasa c reativity tachniques. you wiB develop the abiinv to recognep when they 
have been used 10 create concepts For television commercial? 3nd pnnt ads As we've said, advertising IS a field! 
that requires. a steady diet of creative ideas. And Wherever creativity is required, you can bel that creativity tack 
ntqutia aree'l fm uwdy For soin,: umsnn. n utomobila eommtrciflll come quickly (0 mind as reccni and nor so 
■ ecertt e*ampl«t +$* 

A recent Volkswagen campaign shows cars without drivers driving around by IhrtmsnlvBS and occasionally 
rduamy m front dl dillumK people standing along Hitt road, rpu can picture the biainsturmibg session With idoas 
Hying around the ropuL Suddenly, aqmeone offer? up, "Whet rf, instead of people shopping lor cars, ears 
shopped lor people?” Right, l-'s a simple wvaraal that supports Volkswagen's slogan “Drivers wanted.” 

Rad in the early 1360s, Hem was already starting, to make as mark on the auto rental industry. The computer- 
generated magic so common to today's Mens, television shows, and commercials was non-eustont. So when 
rteru tool a man and a women and sfreir- 2 -d 101 ! Orally final them through the nr end down into the front seat of 
a moving convertible, it made For membra Me television. Tor (twema was.' L Hem mil youm the driver? seat" 
ll was a dasfiic "no cm si'Bints* answer Iq the question. "If wo had no limits, how could WO got more people Id 
rent am! driyir Him ir cftr? ?v Wliy. WW'tf jUJl pluck th*m nut of whereytfr they happen lo be. and drop them right 
mtu the from seat □! one of Our cars!” 

Sometimes il s thB 'break the rulos" ads EhHt am the most memnroMo In Che mul to lata Iflflfls, the corporate 
spokesman for American IfUZJ Motors was Jo* Isrnu, a wanting stereotype of a sleazy, dishonest car salesman. 
JoO. played by David Leisure, would make outrageous obviously lake Claims about the 4 K 4 !su£u Trooper. Fie 
once said chat it coald easily carry an enure symphony orchestra, finishing with, 'and rf I'm lying, may lightning 
sink* my mother. ” Cut to a sweet-lacking, Irttfe old lady standing by an isuzu true k who, with a blmdmg flash. 
vanishes m a puff pi smqkt. Who is tin Fast person an automobile company wnulri oyer pick to be its ypokasparv 
sen 1 Sonieorui like Joe Is j/ij. who single-hendedly turned the company's name into n househeld word 
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The Adopt and Adapt” Technique 

(..Mil): i3ie adopt mid adapt njchniiri-c, yuii look n problems similar lo yours liuji have been 
solved in other licLdv You then look ior ways to adapt ihoe ^*>1 urtons To your problem, For 
example, let s sai' tho c you are working on a Website or software prugr.nn that require* dis¬ 
playing marly photographs* —too mam to uppeiir on one page or Herwtl. Your problem is In 
tigun; out how tu orgam/c ihe inugo. Using the adopt -uul adapt technique* you think of 
other ways, outside ol compulej >. that you have *een photographs displayed 

’ In a photo album, perhaps displayed 
chronologically 

* In a museum, perhaps w ith different pages 
for different “rooms 1 * 

- In .1 magir.inCi yearbook, iicwslelitT, or 

neWspapej 

* On someone * de^k or •will 

* In an advert Lhi ug hrodi u re 

* lit the post office, as a mOM-wanted list 
■ On billboard* aLong ihc highway 

Any of these ideas may generate approaches 
fur displaying your photographs, suggesting 
ways to Organize then! and j>o$sil>le graphic 
treatments to develop. 

Although this example is quite ,t literal otic, -Ou can use this technique oil problems that ai enY 
quite asstraighiforw.brd. lot example. let's say Thai jriu are trying lo design the toolbar for a 
website or multimedia application. You realize that the inimber nf options j-ou must pn-sem 
is larger Mi .in the space vou have available You ndglil use Ihc .idupt and Jthipl tci'hnjqiie lo 
rliiiik of Other situations Ml-It solve ihe problem of Lou nun;, items lo view .ill ,u onur, 

” A i licst of drawers sokes I he problem by m ^ini*!^; il> content* in slide-oiil units, EVrhaps 
some of the less Ihtuicntly used [uuUiuns could slide into view when a parlicuL.ir control 
is clicked or rolled over with the mouse cursor, in clothing drawers, the most often-worn 
clothes rise to the lop of the drawer. Perhaps this is hnw a Microsoft designer developed the 
id lm for (be dynamic puUdHVwn menus critiqued earlier in this bonk. 

* .A lilc cabinet wpitiitrs papers in tabbed folders. Perhaps wc could use a scries, of labs to 
organize functions. £"licking on a tab reveals its corresponding controls, 

4 Some corner kitchen ciibi nets are Cned vrith Ivy Susans that rota le to reveal i he i r contents. 
Perhaps we could create J Jazv-Susan loollur that reveals its ciMilcnls when rot j led usinj; 

I be mouse. 




IDS I -■ >r- . | 

■ MoJei ii cell phones allow us to "dial“ com moo ly accessed telephone fl umbers by aping tl]e 
name of the person we wnt in call. This type of interlace iu)uif£s no screen real estate 
whilsoc'VLi. Would a voice-ncl hated menu 'System make sense for rhU application? 

Allh ou^h this method has us look primarily outside our own field, don'l overlook the value 
of mining ideas from other websites and software. Whatever your problem or siCi.».kli-<»n 
chidMl .in.-1 bat other designers have faced similar problem^ and have dnfttd workable join 
lions, Neva |uss up an opportunity to look at a new website or software program. You will 
often discover new ways of doing things that you hadn't considered. You might consider 
-. reeri ■ .npiuritit’. imioialihg, and filing Mu- '.creens that contain ideas, that impress yon. 


The "Random Word Technique 


VVli,iI if finding itk\i ■■■ w is ,ls cusy ji pulling them oltl of j h.iL: Utiiit: ihc nhmluin word lech- 
niiiur fcj u HiTf fj^L way of gdJKi Jtiiui new iiitxs. You him ply *ipplj' a random word lo your 
problem or situation and think ol wavs that ihc word could applv. 





,y 

JtiiM 

—— j, - 

iMtaMft dh&vwjdhi iatafiWi* 

.W'tf -VWMhit 


fU\j 








The randomi word technique requires that 
you first create a List of words n> use as 
triggers. Some crealivitv authors recom¬ 
mend opening a dictionary ,ind m: tec ting 
J WOfd it random. J prefer to use j list of 
words chosen lor their ahililv 1o suggest 
lots of possibilities. The list can include 
nouns, verbs, adverbs, and adjectives. It 
cun also include word* that you can inter¬ 
pret in different ways, for example, die 
word “block' can be Used as a verb to 
mean to slop or inhibit. Tl can also lw a 
in mo th.it means ciihci sometliing used 
10 construct or j section of ,l town 
enclosed b lour strtttN. 

I able 5-1 LOliluins a lisl ol' trigger forms to 
use as j si.iriirji point. Feel free to add 
your own words to the hsi. espec tally ones 
til.11 trigger ideas fm you. You CUI1 also 
delete words that you don't find particu¬ 
larly uscl'y I o r ewsca live. 

Now Igi's gk this technique a try. let's 
iw we ary working on a multimedia soll- 
ware project nvhosL-go.il i% i" I'.M'.h |?oii£>lir 
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u* play guitar. Wc lIiihuc the waul "*kip" uur 
random (rigger wood. Here jrr some ideas that 
this word suj-kjOfcts. to me, 

* We can anting? the guitar irtslnirtkin into 
weekly Ifssnili, alltvwiMg users tQ skip lessons 
if they arc already profitienl. 

* We c?n supply audio that contains a rock 
group's mstrumenla, hut skips the guitar 
part* which ivr .supplied by the student. The 
student lj n speed lip or slew down the play¬ 
back of the accompaniment. record bis pan. 
them hear the song with his part included. 

* Kids like to skip tope as a diversion. We 
could provide mini-lessons ihai wink (in a 
particularly catchy guitar riff or technique. 
Students can use these us a break from regu 
kir practice. 

* We could present difficult son^ in singe*, 
allowing students to skip the hardest parts 
until they have mastered the techniques nee- 
tsery to play them. 


(abis I 5 - 1 I Select i>m-ol these wiortls si random, then thin* 
rUout whin Lis word represents and how, u. 
chnriiclHrifluis might help vMu spiv* you.- CUMM 
problem 


Terms to lisefortne random word technique 


tree 

swing 

towfll 

sura 

store 

parent 

mask 

frir 

watch 

st-riy 

sense 

esse 

appte 

wing 

hea^t 

windDw 

caver 

battle 

stem 

Wend 

skip 

urn 

place 

wide 

roll 

wpar 

block 

chest 

bank 

light 

camp 

shgw 

tire 

file 

shoo 

Child 

stream 

bill 

slice 

5pm 

drink 

bite 

coat 

SBBd 

test 

Hide 

ho* 

top 

stick 

(fwt 

(Dirt 

tremf 

fan 

run 

expert 

goal 

scar 

root 

fencE 

ring 

seal 

smile 

slap 

wind 

pick 

hark 

wheel 

iwlch 

sate 

spoil 

Pipe 

book 


Making Creative Connections 


The reason that the random word technique Marks so wall is thattha mnd loves in make connections between 
things that seam, a; first glance, to have nothing n common. For example combine fish wilh bicycle, and you 
can pretty easily coma up with now inventions such ns: 

■ A pedal-powered fi sh ing boat 

- A wo whealnd vehicle that yo» propel forward hy wiggling yOot body hack and forth like a fish 

• Bicycle wheels covered with scales tn reduce wind resistance 

• Fish shaped handlebar covers 

• A fishing rod holder fur your lucyc le 

■ . . and so on. 

Try this yourself with the two words "mal" and "swim " What new inventions or concepts can you create? 
















loa 


l 


y and tdon y*nij ration | 

Wlkni vim wkvr a word think «>1 dll of itopuafcte nurajiuigs udenteit). 
l-or i. , ’jrnplt. die term “ wear* can suggest the au of putting on clothes or 
protection. It l .m-i also mean the thing ihm is hemp worn, *ueb as rainwear. 
Wi-.ir L.m jUi mean to Jcgredt 1 with inr, as til wi-.ii .m.iyui wrar down 
Thinking of JilTurenl umlexb for each word will Jidp you gC(Vr.Uv the 
most ideas. 

The Incubate" Technique 

Sometimes ihr Iwstapproach to developing new idfiis is to do nothing 
The incubate technique is a way lo wl «ior mind m the task of dvvd 

og ■ i e i|j iil’w id^JM or willing a problem while you gu with the rest of .. life- When you usl- 

the Incubate technique, you sli-J sour nmnJ with information regarding the problem you arc 
trying to solve. Uteri you Stop consciously thinking ahmit the problem and allow your Sul>- 
canscimn mim.l to devise it sown solutions. 


_[TIP] 

Tty to resist the urge to “trade in" 
yam randomly chosen word for 
another one if yon do not quickly 
generate useful idoas. IF you 
know that you can always selHct 
a new wind, you will not be as 
likely to get the most from (be 
word vflu select 


State the Problem 

To uhl j tlii'' incubate technique, lir%t suit your problem of Deed a> clearly as possible. Imagine 
how great yen,] will feel when pi! generate that nfw itk'a that solves your problem. Visualise 
how ii will impn wv veinr project or otherwise enrich your life 



Using what motivates von best imagine jnursclf hying richly rewarded for coming up with 
ihv itk.i. Fv-d iVl-l- In- I'.uU.isuc. magnifying I lie rewards as mueli as you’d like. When you are 
visualizing, try to actually s« yourself enjoying the reward* of sour efforts, Perhaps you sec 
yourse-Lt sitting in a convertible, waving to throngs of adoring fans while ticker tape streams 
down all around you, Maybe you see yourself accepting the Nobel prize for your creative 
effort*., Or there you .nr sitting m front of (he world's largest chocolate fudge brown * 
ic, eating yourself ijito happ> oblivion. It's your fktuasy. 

Da Tour Haitiewflrk 

Scut, .fo your homework Analvre the problem or need from iiei'v possible angle 
Research the problem by reading ahmit il in honks 01 maga/irws. .Lski:iv- :iv i . i- ■ 
friends, or examining the competition, and doing anything else you can 

think oi to prepare your mind for ihf challenge that Lies ahead, tfominue until sou 
are certain tb.it you have prepared yourself as well m possible, 


Give the Dire ebon 

Once 10U are finished toilSCiuLisI)' working on 1 III 1 problem, il s time 
to give your mind the di trciiu os ncqu i red to do the work. Tell your 








EHiPTHi | 


109 


iiiinJ wlm vt ill expect it to accomplish. Be specific. If you have a ilme limit, then. state it, or 
ask your mind m alert you as soon as it comes op with a solution. If il seems silly to be direct- 
ing your brdn ill this manner, remember tlul you IK constantly making demands Ml yaur 
brain—to remember names and numbers, to speak. to instruct your muscles to move, ole 
’ion'vc jxisi been doing, it *> long, that you don't have to consciously think about ii am more. 

Lei II Co 

Once you have made your wishes clear to your mind, stop thinking about the problem alto 
get her. Go do something else. Work out, go to a movie, have dinner, go to work on something 
dse. or do any tiling other than work on your problem, H xpeef that your problem is on il% way 
to ,1 solution, and (bat the m> 1 Liliim may arnic ,u any time. 

Wait for Resulls 

At some point over the next hour, day, week, or even month, you wilt become aware of a 
thought that demands your attention. Il may simply pup into ymir mind, or il may form al 
the edge of your amsticju^jn*s ami slowly crystallwv. You will know intuitively thai this is the 
idea or hMm you have been seeking. The idea may appear in written or verbal form, or as 
an image or symbol. Sometimes the idea or solution will arrive hilly form'd, like a gift there 
for the taking. Other times, il may arrive in a slightly encoded suite, and you must ]«v| away 
its layers to roeal the meaning. 

Try tilts technique a few times, ajid chances are you will be rewarded wjih valuable ideas and 
a new respect for the creativ e power < 1 1 your subconscious mind! 


GROUP BRAINSTORMING 

The creativity techniques we have covered so far in this chaplet were designed to Himiulatc 
your own thinking by forcing you oui <il youi ‘nor[iiid" eonlexL Grutip brainstorming is a 
technique used bv? group of people to generate spontaneous ideas to solves particular prolj- 
km. Group brains running jvlics on fwttcrpfJIti to suggest ideas. 'JTiese Metis stimulate the 
nlhcr participants Lo think of additional ideas. 

When done riglll, br.iinsLormiligiv a wi>mk'Mnl snni.f of creative 1 ide.is. When dune poorly, i( 
can alienate its- pjritciparils and generate few useful ideas, lust Jollow some simple guiddnn^. 
and your group brain storm tog sessions will enhance Hie creativity of all us participants and 
produce some umaring results. 

Most importantly, group brainstorming participants, leave their tides and preconceived 
notions 41 ihe door. There is no room fur superiors, il wdm-ilrv. dji Mini s. ur skives, the 
brail lsUh il imp session ts not die plate Lo showcase ideas garnered elsewhere. The niaigk pf the 
brainstorming sessions is tli.it "it .ill happens here. 


no 


L'dUV inH Jr*d Qintrltb 



What You Will Need 


Here is what vou will need to gci the 
nir^t from your group bram 
storming sessions. 

» A gtmip of people (riLj 
mufg ltu.ii 15 if pa&iblc}. 
fhe more diverse the group, 
the better variety of ideas 
vmi Firrliki'lv to priixlLKe. \li 
J^irtki pants shoo k I ehcck 

ihl.-LL 1 f-Ufi.L^Ki.i voi fHilJFin.s dt 

the door. ! In pewer ul bram- 
storirring i> us spumaneny. 


■ A sccrrlJiR. who writes c.Fth idea utl 1 he 

flipth.ll i or Ihi>.l i lI_ rlu- K^re-Ury nec-d not be cfrlutkiJ front toniributillg idk'vis, 

- A facilitator, often wiiralf, who tracks rhr lime and LetjH (he >ei$inn moving along 
WIHWlhJ)'- 

> A wli iieliH ym J, blackboard, or fljjKhaii. A ll Lp<. ft jr 1 1 * best, sincc, as sheets or paper j re ii I led 
with ideas, they can he torn oh and displayed around ihe room. 

■ M.uk. is..r ,lulk lu Wiiili- down ihe id&is 


* \ laiije conference table or tables arranged m a "L " shapr. II ihese are noi avjilabte, then 

am rw'm when 1 the partfieip.inCs ,.m rthix and see rile wriueil ideas. 

■ NuLepads und pL-nab or rnaj'kers Jbt uJLfh partkipanl so the. sail write their own kfea*. 
noies, or doodles. 


Running the Group Brainstorming Session 

Begini die pro up brainsen \ niing se^ion by sr-acinp: the problem. I'his often take* more \ime than 
people anliiHpa.tr. As m'w previously discussed* taler ns mtuh (ime ns trace-MAry h> state the 
p ro b lem dearly mil fucriiicih 1 , to vnsure lh.u the klett iht group pjciiei-iitcs tire dimied prop 
erb. Write Ae problem to be solved promineaLh jnd display ii \vh^jw ewryune am see ik 

Some groups like to mi u Eiiiiu limit of ^0-30 niiniiks for Lde-u gm^ijLiLm. Larger grump* wad 
more time lu eEiyuce e^erjaikr *e«b the upporiLniiLy clteir idkMs. So®* groups 

■•■uE a lancer cime limit, but Utk-e !>™ks whenever the group *ecmH lo nrrcl or want ihcin. 

j- iKnurage the group \o florae up with HcM h wild And ‘'norma]" ideas. Let them ImtiAr that if i* 
lurbiililen lo * rilki/i 1 nr juft^r .my idea. Pid .1 person to start, and .tsk that person to con 
iribliU' h.|k kk-i IV 'tMfl.iry ifuorJ*. I he- iJuj, on ihc Eli^li-Lil or board. If uhinj; -i lx mI’lL 
wiitu 1 use Urge aiuuglt so ihoi everyone L.m see ibu ilLl'xh. 
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tio around the tooth., inviting each person in turn to contribute an 
idea. Have fun ( amt don't take the session seriously- Laughter cncour- 
jges enculLvity. If j person cannot chink of <m idea* tliL-n skip to Lite next 
person, Perhaps the ikipped person will think of an idea the next time 
around. Continue until time is upor until, the group is no longer corn¬ 
ing up with new ideas. 

The Evaluation Phase 

Next, it is lime la sort the ideas a lid determine which -itv best. Start the 
evaluation phase by crossing out or erasing duplicait ideas and those 
cbat are obviously impractical. Note that these impractical ideas haw 
v -i I Lie- Co the session sincr they may have been wllni triggered j truly 
prnL.tLL.i 9 new idea. 

Rate each remaining idea -it cuWfivjr I. meaning it is praLllLjL arid easy to implement}, prwms- 
iug (meaning it may need some further analysis or refinement h and presently unworkable 
IKC.! i. Resolve disagreement-s by voting—the majority rules. By ihe end oMhis session- you 
will mewl likely have generated Home very workable ideas that you can include in jranr design 
or propose to your client, 

Use die creativity enhance!»enl Lcdmiques, and lilt group brainstorming suggestions usvered 
in ibis chapter, and von will be on your way to serving even the most daunting challenges that 
face you and your team. 


1 TIP | 

Some brainstorming groups how 
the participants sheui due ideas 
rathei than taking lurns, While 
this does add to the group's 
Bothusiasm and energy level- the 
louder members may drown our 
the quieter ones Tty Ihis alter- 
rale method with youi group to 
see what you chink. 


SUMMARY OF KEY POINTS 

* Everyone was born creative- and everyone uai learn to top into ilimr creative abititias. 

* Creativity te c hni q ue$ hep u s, j p proa u h pc o bloms U urn di flu - ent angles This change in perspec - 
live enables us to think o! new ideas. 

* The first step in ci estiva problem solving is to define the problem as clearly and specifically as 
possible. 

* With practice. yo a will learn which Ctnativity tec hn iq uos to a pply in spa crfic situations. 

* When you are Thinking tif n gw ideas, J 0S St thn temptBlmn to jungH them tui) quickly JsiSt con 
centrato on cnsnpHinjy as marry new ideas es possible. 

* Group Ijiiiir.sit;rm uy. where participants play oil each Others' clGfiS, can hn pprticinlarty pro¬ 
ductive m producing new (dess. 
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THE ART OF CREATIVITY 


robin landa 

Rabin L and j rs nr acco/npttstud author of buff S W 
mt ti/iil (its 'ijIJi A pi $(?- ■■ n'Ui .fr Kenn tdifn/evmly, fioli-n 
tjives iectuMS (Hound tbit country and i\3S been \ntet- 
\0&ift'6{) cHlens y'dV on C.n sisL-ol:s o! das ryU, .ti j(,. 
ity. and an. She atso serves as a creative consultant 
to major corporations. 

Crfliilrttly siEwms mysterious. When I ask illustrious Op#* 
ulivu Uilectors an doctors, designers, ^imI copywrit¬ 
ers how itiey canm uj nsih -jit-dtivu ideas, many claim 
Ihattfwy don't know Some sav they don't thint about a 
problem directly. but rather go on to take m a 1t*m or 
museitm extiitw and a solution seem; fo come tp 3h f ti 
in a state of relaxation. Other cmawes are oote to 
articuktR snntBthing a haul tti eir thrHing prni:ess 

“Inoticed bow...* 

"I saw 1h.it and thoughi oF (his " 

heard someone 3 uy. " 

'Ithought. Whai II...’ 

After years of itomo research into 0rentiye thinking— 
observing, leaching, designing, writing, formulating 
Theories. end interviewing hundreds at creative pro- 
faflakmah—I noted some fascinating eomnwnililits 
itmong crontive tftinkars What scons la distinguish a 
creative msiid in h y seem, at hrsl, unremarkable; how¬ 
ever. upon former examination, one can see why the 
Following markers can yield rich Creative output. 

BEING. SHARP EVEP Part cl almnctany design ar an 
education is learning fo he an active vtiweirsBer. 
Whether you. cur - iu draw a Lliftif contour or observe 
the ijusiEkh cm I arms in space, you loam Eli he com¬ 
pletely attentive to the visual wend Maintaining that 
State oi ale lines*. ul being a sharp- cyerF Observer, 
al mvs one io end c e the inherent creative possib'litie-s 
■n any q van situation Being watchful when observing 
one's Surroundings, everyday |iaMtapnsifmn$ ai nws 


one to see what ethers may miss ur hot even think is 
ol note. 

BEING; RECEPTIVE If you've evur Worked wtboi lived 
wifli i stubborn poison, then you know [Fie value ul a 
person wtioisllexitile. opdii to suggestions, other op-ii- 
ions, constructive criticism hid diharent scIiolIs dl 
thought. Reces'ivity, as a marker of creativity, means 
more than being opento deas It meansembracing the 
nation al iicurr iia information a lid new ideas 

Btiiii l. llexisla allows art to IcLgo of dogmatic think¬ 
ing and to shift when necessary, to bend with the path 
□1 a blossoming idea. 

COURAGE tiovmg the courage to lake risks s purl of 
the cieaifve spirit 

For many, the foar of failure or appearing foolish 
inhibits n&kToking. Fair squashes that inner voice 
urging you to go oul on a creative limb Fearlessness 
coupled with intellectual curiosity, u desire to explore 
and be ari adventurer, an ml era si in many tilings (not 
I list, one thmglt rather man play it safe and comfort., 
a We, feeds creativity. 

ASSOCIATIVE THINKING The nhilry to connect tint 
outwardly unconnected leads creative thinking 
Bring Iwa old tliregt, Eagalher to form a new combi- 
nation. Lfo i go tv-o objects into a stumless i! die rent 
mm. Creative peep a seem to be able to arrange 
associative hie rarefies in ways diet allow them to 
make connections that might seem remote no or even 
elude a IF others 

CreeEiviiy is tiuly a way ol thinking, d way of enenun- 
uig the world and interacting with mlarmebun and 
ideas. Whelh-er you'ie designing ,i (root jacket or te*- 
in| a photograph doesn't manor. What manors is how 
you think ahoul almost anything When you are 
sharp-eyed, stay receptive, have courage,thin* asso- 
onlively h" 'I approach Ilk with enargy, Itien your 
work will ha h nnyed 

topi*i Q Y: L.tiioj JM3 
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in review 


What an? seme of the major obstacles to creativity? 

Hurt do creativity techniques work? 

Which creativity technique could generate the suggestion to include a coupon for a 
toaster m a loaf of bread? 

The large. spaqhetT-shaped cleaning cloths often found in mechanical car washes 
couid have been generated by which creativity tochnigua' 7 

Which creativity technique was likely to gauoiala an idea ter an ultra high-speed 
shipping service called ^The Transporter"? 

List three things that can interfere with idee production in a group brainstorming 
session. 


exercises 


You have been hired to help develop a website far a vimml shopping mall To help 
develop concept ideas far the project, you imagine I hot you hove been hired os the 
architect to design an actual bncks-and-mortar mall using a totally innovative 
approach. Use some pi the creativity methods we have discussed (such as the no 
constraints, break ttiB rules, reversal, antf random word techniques to come up with 
new concepts for flip mall Sen if you con adopt pna nfymir irtnas ter use in the vir¬ 
tual shopping mall website. 

Using any authoring system or enwronrnenL develop an application that dispJiyys h 
random word at the click of a button. Use this application to brainstorm new ideas 
using the random word technique. 
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objectives 

Idi"iiiiIf Elii: ccinfiDDoni |miu of nienuM 
lifflfiiifv Slur enmmrin inEisrlvicB control} 

Analyze rhE r-iipbilitits of meHirs- eeniErols 
S'/kcMlir: .ijipruji mLi: LoiLtrol IthIi& ifiveri liliuiliM 


introduction 

Menus and controls are the buMiog Weeks thST perform the work of the intaitatfr. Each tool rs 
ticStyitird wit’ s-pacif il c-ygubiliUe-if- tu handle specialised Usks. Creating an interlace tli-i works 
meant selecting the tool* that bait fatiftHile and simplify the interactions between tha user and sys¬ 
tem Although designer? and programmer? nan combine their skills to cnMle A nearly limitless 
uSSOrbrsut of ccnVdb. in Hus Chapter we Mill DOilcdnErAla an- seine ur the standard controls and 
tools that comprise the tooi secs of me mjnoi operuiurg system?. 

Two md spensable rtffeTinca s to Ihe ustn mtorfaci controls ol tha Windows and Macintosh opera i 
ing systems are J7i# Microsoft Wmffows User Experience (Mtc rnsott Press, 19391 and Ihe Mj cmfosih 
Human interface Guotehtres lAdihsiMV Wesley, itfiBi. Eflcb of mese valuable lereienm may be 
downloaded tor fraa IfUffl the Internal. Anyone who is designing interfacas For either operating ays- 
tern $ well Aftvised to read and study these guidoS This chapter combines i£y informal! on atom I rli* 
various controls »uu id m these guides wnln The experience am: observations el ihs author, other 


designers, and users 
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MENUS AND CONTROLS 
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HKfe jri Ejuiiv skulluitks between die controls available on Window* md Macintosh sys¬ 
tems. This parity of-crnitrols i* no Licddeiu. It miukt be esciremety JiMkuk tur developers lo 
create flofttPHT to run on Macintosh and WindEiwH sysEcrnn if their user inlciTicc coiltmh 
I'l'li i\ i\\ . - 1 :ii| 1 11 - l!iIII- 1 l- n lK I jLewiie, loda) % mM popuhi '-Mb browsers support I 'd 
op^ratLn^ systems. IVople who create websites can develop one scl of oxki pd ihe Imwvm 
ensure thal the site is accessible to users or either platform 

J here are, however many differences among the various platforms. Some controls that are 
available lo multimedia and jpplkulicms Malware on Window or Madnli^h platforms* are 
not available to browsers without scgruficanL engineering; effort. Same controls rh.it are avail- 
able lu HAuiJows boiiwan? may hive- to tre luiLusii deve IdjuM tur thu Macintosh. hi virtualls 
*11 cases, boww, a control exists to jcafmplisl )» giver interface task- 


MENUS 


Meman- an important o unponL'nl tit navigalion. The Windows and M.niinosh operalmg 
systems [provide dewi uperH ",villi loots hoi ihc creation of sophist ica Led drop-down nreilUi, 
Nearly all jpj>licatnin.s include drtjp-down nKJius, In ibis station, we will Lou-k jn tire vaj'ieh 
efaptwns ihar these menu 5 ofi«r. Although browsers include these drop-down menus neb 
sites do not. They are often found m multimedia software* however Figure 6-1 shows a drop* 
down menu with »ls component |-or<> labeled. 


Sd-flclez iptnurhi 


lAan.j lap : 


kvnf 






E:llp1i4'Fnite#lH Lrttfr m^fl *n|*■ idltianuri 
llll'j~ni^l MR i I hi- ptftn l!?-M«Ktr: 


CM£M^ 1L| hWu Ch* i 


-■ — Sqptrtbp 


AccKifctyilpnnqiBbfl khjj wh^ih* rut^iit 

15 llkr drLsIMGlhS- Lin fir j Btfr. . 


Drop down menus, consist of rcrenia 
L i [ I t.s, hvIlllIi arc the-1 up-lex cl name* 

i l-'Lte, F.dil* Help, etc.? that appear on 
the menu bar I n Windows systems 
the menu bjr appears jusi hclnw ihc 
litle bar, which b ihc luf but oP a 
window. On the Macintosh* the 
menu bar appears at the top ot ihc 
screen Drop-down mcmis are so 
named because when you JcLi vjIl- 
lhi.lL!* they -Lop down starling |usl 
below thy modated menu title. 
Menus consisl of menu item*. which 
can include tc\T and icons 


Users c,m operate -■ menu by the 
mouse or ihe keyboard. Using tire 
mouse, i lie user dicks the menu. iMe 
to drop the menu* then clicks the 
desired menu ilem. Using ihr key 


fae pails gl i dropdown menu 
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Ih^ihI on Windows trvU lype .< i Im y seqilMIOt l'- hold.Uji dQWQ tfef .Ml )tS) 

while pressing the key tlui is under Imod in ihe menu lillc, For example, pressing All-Fdrops 
down (he Pile menu r 'A.ifd. Then you type the key corresponding lo ihe underlined char¬ 
acter of the desired menu item Iwithor without preying the All keyl, For example, when the 
Fite menu is open, ihe menu item for uving your document is Save. Therefore, you mo type 
the 6 kev visile the menu ii open lo save your doCuUienl- 

Some menu items can be assigned shortcut keys. Ynu lype a shortcut key without a menu 
being opened to invoke its function. For example, you can type Ctil-S while yx>u are editing 
to save (be lurmll document or f"(rl-P lu print it. When a menu has a shortcut key assigned, 
always include the shortcut key on the menu ik-ni maieri utentDihmiMti^ Fof example, 
when you open ihe J ile menu in Word, sou see that Gtrl-N opens a new document, 
Ctrl-O opens an existing document, and so on. 


Menu Item Types 

The most basic type of menu item initiate* n process or performs a command when clicked. 
Some niciiu items include an dlipsi* (,..)* which indieaiti that the user must provide more 
information when selecting this choice. Selecting, such a menu item displays j dialog bo* 
where the user enters this information. 

There are ,ilso menu items ihai i;in be used to set a partial tar state or option, (,’sed in this way. 
the menu items behave independently, like check hoses, or dependently. like radio buttons. 
Both check boxes and radio button* are discussed Liter in this chapter. 


Independent Menu Item? 

When sei ns independent, sdttitng one option has no d’fecl on other 
options. As, with check boxes, check marks an? used In indicate selected 
items. Figure 6-2 shows indcprnderil menu items used la show selected 
vti-w opiiiuisln Windows iLuiu. 
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Notice that the independent menu ilcm* in I igune 6 2 are group'd and 
set apart in mi the Zoom and View bitmap menu items using <i separator. 


Inlcrdeppadcnl Menu Items 

When ii group of two or more menu items work interdependent ly, ihey 
bch,ivc siinikirly to r.idio buttons. Only one item in ihe group mar he 
selected at a time. Selecting an iieni dcsdixu the previously selected item. 
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ChncscnsiiAs h iixud (p ihow which 
nrtp jrjril n nr mean items ifli-i beer 
selected Sflitfttiisg. &ne fr$m has nc 
eHeci on itlhin itlfr!:ii i !Vr-' iO!e-:':[iftns. 


figure 6-3 shows dependent menu items used lo specify line thickness. 



















h casc-rflw; rni-jin -.iviH mnl E^erden fi^nii items la 
HHK dv Silit l!:<ctai*!tt Sm Hiitlig Jfi- u! IhUrSir 'I'L-qu 
dttlflf 04*tl4CB Eliti LUlrBlSl k v HBNiH:Ci|d item 
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Castling Menus 

Many whites :'iinl *nfTw.irc program* >\y eisc.icknsi menus which in 1 a ho I l-l! nested 
menus or hierarchical menus (in Windows Sun menu ostium* cascading menu items. 
When you roll die mouse cursor over tine Program* menu item, it display* p lewndaiy menu 
ot <iJ] of the installed programs and program folders. Selecting or rolling over a program fold¬ 
er displays jel another menu of the programs scored in (Me folder. 

Sinn' id van Mites *>f cascading mentis include: 

* They provide access to a potentially great amount of comem. 

■ They make- cflkieml u» m spaa- —each new menu is displayed in place, without requiring 

■j Jltrw jijjtL- lu Iw displaycd. 

■ They offer users I he oppt irtim i tv So quickly view diffenen t men u choice* to find 1 hr souflh r - 
after choice wilhaul committing to a choice by clicking is. 

■ Is U genera J3v easy to recover tn.nn select mg the wrong menu. 

Cascading menus also haw some significant disadvantages: 

■ Many k jM.adiug menus n*sjuire precise line motor skills, rendering them difficult to u>e for 
certain types of users, especially the very young and elderly. 

1 They ,ir; rml cuiMtKntly implemented across applications. 

■ Th« r ease ot operatjo n depends on how ■well i h rv are program med. 

* I hry can In- compfok ami unwicldv, sometimes Luntnining five ljj inuie hcsLl-J menu*, 

Wi-'Jl l -. |■! .. 11 :• k asn,ai,liiig Flic 1 1uS hiMher in our Jiiaiuiun nf navigation in lihaplyr 7, 

Creating Menu Titles and Menu Hem Labels 

CREATING MENU TITLES Use '.iilglc words for menu titles, selecting names that deafly iilJiuIc 
each menu's function. Beginning with the leftmost menu title, use the first character of each 
menu title as its access key. FI the fir-r character is already the access key for a prior menu, then 
use die I i‘\| n ihi seel character. 
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CREATING MENU (TEM I ABELS 77jv Micwnfl Wmifowa t-Wr Experience 
advises tli It* list nauni or noun phrase* fur menu iLeni names if the 
iTiemi litic U a vert if the menu tide is a rtouru then use verbs or verb 
phrasei ro name vow menu items. l : nr example, if the menu title is 
Insert* used ,1b ,1 verb, [hen it nukes sense to name the menu items 
mm ns* such m Text, Picture, arid Document. Jf ihe menu title is Table, 
used as a noun, then menu items Mich as Insert lable, Delete Row, and 
Insert Column make sense 

Nut all menu items can adhere to tins pattern, however. ]n Microsoft 
Word, tliL- l ilil menu (vptb) includes Select All (verb phrase-1, If the 
menu 1 1 Lie is Reports, you ituy well want to include the types of 
reports, sudi js Summary or Progress, vdiu 1 1 are adiwrives rather than 
verbs. 


|TtP| 

Try lo avoid menu hues that uiu 
have difterBirt, meanings. Menu 
titles such as File, View, Insert, 
and Format are both nouns and 
verbs, which can cause usurs to 
mis COIlSl rue Their meaning 

Luckily these paiticuiai titles aie 
common enough that their defini¬ 
tion is clear to most people. 


COMMON USER INTERFACE CONTROLS 

Whit arc the four common slates of pushbuttons? What are ihe difference* between a drop- 
down lint box and a drop-down combo box? When should you use radio buttons and when 
are checkboxes the more appropriate choice? What problems do users have with mullipie 
selection jnd extended -self l! ion list huxe* and heW can you mike them easier lo understand 
imd use? In this section well answer ihcsc question!! by exploring each of ihe common miei - 
face coni rolai. 


Pushbuttons 


Fnsbhtillum, *ri|rietimes called command bullons. .in: among 
the cjhiCMt Lonlroli for Ustfls to tiridrlst.il id, You lI i* k the push 
button to perform ihe Illhunmi described on ns UbcLTJw push¬ 
button:. provided by rhe operating system arc plain, reel angular 
or capsule-shaped. As Figure 6-4 shows, however, a pushbutton 
can he c realed frum nearly any shaped object 


AINtCUflll STflrttiartf [I .ch-i n'drtt ai" psph 
graphic artists can cream pushbuttons irum 
a variety at sr ip - - & I ' 1 - r establish tl e 
cAaracter . I r>u Sesign 



Ncurly all of the graphical programming environments include 
tools for creating basic pushbuttons. To create more sophisticat¬ 
ed- looking pushbuttons, artists create graphics lhal represent 
each of the various sMtes that the pushbutton supports. 
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ttarr At CiUlBflM puaMptlDll 

vims hi aaftdsie Wuidwis 
ftunons 


aFftTu Li I 

Whitn to Uip Pushbuttons 

Uw pufhhtitmn! in begin an action. Common dtnmplcs of such «ii.tinns 
iodtidt 

■ MiniyaUn^lD i (tiflmnl poge or WIW1 

> saving or implementing options or setting?, 

1 ISegulning an operation, such 44 41 sl*.li^l K 

■ Canceling an operation 

■ Bfow&ing Jor a fie 

When Med HI multimedia software and webiilCS. tlw four common states 
oi a pushbutton are: 

* Nonm! stale 

* Glow or h ighliu 11 ted stale 

^ Down state 

* Inactive or unavailable slate 


Figure ft-i shows Che-various bliinul viatfN. 


Normal PitsiibuHfln Stale 

Tin- iLcn'mal sIji|# of a pudibultnn is how U appears "uunulh tli.it is. when it i- displayed 
and available, luit not being pomled. In or clicked. All pushbultons need to be displayable in 
the noruuJ state. 

Glow or Highhflhled Pushbutton Slate 

Some pushbuttons are programmed vi that when the mouse cursor ^ moved onto then nor¬ 
mal slate. I hey are highl i ghl nl in Mime fashion. SonlclinW'. thes appear Ul move out of lhe 
sencert and toward the user as if inagne(kj]1y ail railed In the mouse cLlnur. Sometimes l he 
pushbutton label elualges Color. or die bullion uul appeal to glow. I hi> optional pushbutton 
slate is cal led a glow tir highlighted state leM and images that are used as links ean also have 
glow stales The website in Figure ft-ftfl uses small photos ?s links. Rolling the monsio cnnor 
over the leftmost photo replaces its image wilh ih.u shown m E-iguic ft ftb (lolling the mouse 
i.u ■ ■ ioei die lira test line IGuggenheim Museum liilhin abo lepl.iLC.i ihc pliotu with ilw 
graphic, a sofivwhai awkward effect A newer version of this website eliminates the tour text 
lines and simply displays a tent babe-1 that identifies the rolled over phoio. an improvement. 

Figure ruse shows simple, effective glov applied to text. 
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li|<iu as useful because it provides tieed-back to the UStT ibal the bultiin is ilLtiae arid ihill dll 
. i; <n ■. 1 1 iv'iiilt from its being clicked. figure 6-5 afamm a very simple form of that is 
,u liii.'vi.'il by a cttupLf of simple steps. Tirsi. the label is maintained in the same position .is ihr 
in.iiiLkL>l Mil '•••<.■; ul, I he- appearance of upward mov emenl is itliim'd lw im hiding Light 
shaded, single pixel line on ilie ■%»| .uuJ (eft sides of the pushbutton jiaJj darkei shaded Inn - 
itn the bottom and right sides. 


Down Fusubultsd Stale 

Mnsr pushbuttons include a siak' Lo indicate when the button is in the process of being 
didei Often the button is made to look as if it is sinking down into its kn kgniuftd. Such a 
stale i l. ilk'd ,l down ilalc, since tin button Looks as if it is ln'ii:.: pushed down Hie 
Macintosh reverses the button colors to show that a pushbutton is being clicked, if the button 
normally appears as black text on .1 while background, the down slate -hows while letters on 
a black background. 

(>ine of 1 Lie simplest wau to show a down state is to reverse the light and dark single-pixel lines 
den rilied above in l he lection on nl«w, Hie effect is. accent ruled by the fad (hit the Hilton is 
in its glow slate when it is clicked. This makes the bultuii go directly from a raised to an nisei 
appearance. hgure fc-5 shows dus simple down effect. 

In most applications, a buiEton dick is only processed when the mouse pointer remains posi¬ 
tioned (in the pushbutton when 1 Lie misuse is released. This gives users a means to change their 
mind abnaii clicking a button in mid-click If the user pushes (lie mouse button down, then 
moves the pointer off the pushbutton before releasing the mouse button, then the dub is not 
registered Lw tlie software. IhLscan lie ,l valuable huh, ate lor users. 

Some applications program pushbuttons to remain in (In- down stale In indicate 1 hat the 
opium conlnjlkd by tbai pushbutton ts activated or in effect, for example, when a Microsoft 
Word user is typing text with bold turned on. the Bold button k displayed in its down state. To 
cancel the opt ion. the user clicks, the Bold button d^in. In some applications, 1 hr user clicks a 
dilicivi-Lt button in iht! Maine group tu cancel the previous option jju! select .1 new one. When 
ope aimg in ibis manner, the pushbuttons are operating, like radio but tons, described below. 

inactive cr Unavailable Push bull an Stale 

: '!v; inactive or unavailable pushbutton state lowers the contrast between 'he label and the 
button hree color to mn-ke it look dim. Such a button is understood to be imam liable for click 
i njg E : igure f> 5 slsows the inactive state. 

As noted previously, it may not be obvious to users, how 1o make an lliijx ail able button avail¬ 
able. | ih ihi- tc.is,'n, ;i is ulu.il belter tu remove an unavuiLihk- button r.ilhei ihail durwulgils 
m-iLtivc slate. 
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Menu Bull gas 

Notice that the b.iek .mil Forward button* ill Figure 6-5 contain .1 small black iriangle, This, 
symbol indicates thjl these are menu but tarn- Wien the user dicks it is k i hi billion, it muslins 
in its down stale while the menu is displayed. When the menu is removeth either because the 
user made a selection or cancelled lhe menu bv clicking outside it. the burton returns to its 
normal state. 

Button Labels 

Deckling mi the Label tin ,l pushbutton ncxpiircs careful thought. The idea is Lm capture tlie 
essence ol the pushbutton's tunc turn within a word or two. Most usability experts list ihrco as 
the maximum number of words in a pushbutton label. Although this is a p.<nni guideline to 
follow, avoid sacrificing usability to brevity. For example, it makes no sense to shorten the 
label "Create Schedule" to " Create" if I here apt other Hem* besides In-dull* that could be cre¬ 
ated in the current, context. 

IF a pushbutton's function cannot be described within a few words, consider add ins expkna- 
lort | ext and keeping the pushbutton label short. In the above example, l he In ik I ions lsUiIlI 
be grouped and given the title “Schedule Functions” The schedule function* could include 
ballons labeled "'Create,"-Modify”and”Delete/Another option when labels must be long to 
c|,inlv meaning is lo swilch to a different control, Such is a hypertext Link. 

Whenever possible, use verbs as pushbutton labels, "Create Schedule is belter than 
“Schedule.” Notice the ambiguity in the label ‘"Schedule." Ii can Ive concrmed to mean, “..\dd 
MiniciKing to ■; schedule j' , 1 * lit “Schedule ,i meeting for this Friday" It can nho be taken a* a 
noun, as in '‘Show me the current sitteJuLc." Such ambiguity olfe'ii confuse* users, jet design 
ers cannot always predict which labels will cause users problems. J lui is why iisei testing is su 
important To I he design process, 

( jpitali?e each word of the button label except conjunctions fe.g.. and)* articles fe.g.. fife <i. 
nrrj and preposition* of less than three letters tc-g., in, tn,l. 


Radio Buttons 

Radio bullous, sometimes called option buttons, are small cucubr 
buituns that aid displayed m small groups of between two and approx¬ 
imately semi. The selected radio button has a fi!l«l-in dot in ihe mid- 
die They -ire aitirm.dk labeled v-itli the Ubd often positioned to die 
right of (he button. Figure (i-7 shows a group of radiii button*. 
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If you Hire cunouws to why the name radio button was chosen lor thew K;i1|lJ , ,,, s ;!l . v . hte 

LOturols, dances are yud haven't driven a cai of the lUStb «r Mie - • i n. - #i ( 
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Adiotin thnc ears <iut'u io pruKi ^Ldtiuni via a row ul' nirxhiiniul buttons, when 

von pushed one ol itie bullous. it remained in the pushed in" position, atld uny button that 
was already pushed in would be forced hack mil. In this wav, onlv one buium at a limecould 
be pulled in. Thin makes sense, since only one radio station at a time can be selected. 

Ratlin buttons in software v-nl the some way, They alw.iy* appear in .»group, and there can 
only V one M-k,ial in the group ji a time. < licking a different radio button deselects the cur 
rernly selected butLon ajtd select* the one ihar was dicked. To deselect a radio button, you 
milsl select j dillerenl button in the group, smee radio buttons do not operate as toggles. A 
group of radio button m.iy he displayed ivilhout any of them being selected initially, Radio 
buttons . an 1 1,<h he • lnn.cn m an unavailable tale, 


Wh$n is Use Ratlia Billions 

Use a group of radio hullo its when there m- mutualh exclusive option* ut values, ol ss hiEc h 
the user must select one, Some common examples include when users must select one of 
several: 

■ Shipping methods (UPS Ground, 2nd Day Air. Next Day) 

* Payment options I Visa, -Masteillard, American bxprihs \ 

- Product colors or styles 

■ Software imLallalton options 

■ Dilticuhv levels 


When NdI to Use Radio 0 title ns 

Don't uv radio buttons for nJviguTwn To general, don’t use a radio button to initiate m 
action. To Initiate an action, no- ,1 ■.nntrol s,ildl us a pushbutton. Often radio bullous will 
appear on a jugi m m ni-ii rh.u includes A pushbutton for submitting or .saving the options 

specified with the radio buttons And oihet control*. 



Al t h nq.: cji■ you can select 0 iadiu 
button by clicking cither its small 
circle or us larger label, many 
users don't realms this and aim 
for (he smaller target 


I believe there are exceptions, to th is r ulc. however. For example, if a soft - 
ware program does noi include .i separate options screen, you muv need 
to include a control for. say, switching between English and Spanich lexl 
ort ,in opening, screen sulIj as tbc splash s. 1 ceil, (The splash screen is the 
opening screen of mum multi media software programs that irclmb 
the name of the program, the corn puny that owns ii, eic. 1 

Including these I WO language options Us radio bu( tuns shows the cur¬ 
rent language sHectinri and allow* ihc user to switc h language*. A* soon 
as the user clicks, the text changes In the selected language, so (he radio 






I CHAFFER t | 


125 


l'uiion i.s initialing ,m action. ] ^ould substitute two pushbuttons instead, but lb« duesn i do 
Ai efficient a job as radio butloni* of indicating both tlie curremlv selected and optional stales. 

In general, don't use radio huttonx w hen ihere Arc more than about eight choices in a group, 
li is difficult to Kill! a large group Ol radio hut tons quickly, fn such caws,. list a different con • 
Irul such ,ih j lirLbox, discussed Liter in this chapter. 


Labeling Radio Butte ns 

Lreaie radio button Label;*. using sentenCe-slylt Ciipldi/iuLoii. t’jpilali/e the lirst letter of I tie 
first word and any proper nouns. L'se only as many words as necessary to enable users to 
understand the choices. Elnn't use pimut nation al the end of & Libel, t'siq'l when it leads To 
another control* as described below. 


Avl■ id repealing words auu^ chokes. Instead, pull u-ni ihe 
repeated words, and include them once as text above the 
radio buttons. I mi this text with a colon, lor example. 
Figure ft- ft shows two different ways to label the same 
group of radio buttons. Notice how much ru-sier 0 s m 
quickb understand the options when the labels Jo not 
repeat words. 
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As mentioned above, a radio button can he used to acli- mn ^ [n l|w Qf Wl * whj|- koflp 

vate another control, serving as the label for that control, m ihe mpamng «r mi;ti eiwie* dem 
Figure 6-9 shnws an example of ihis. 


Sometimes radio buttons are used in enable users to selcet 
one of a range ol numeric values. Jui example, a survey 
might ask iisen to rate the importance of a given feature, 
without specifying numbers. Figure ft-lfl shows bow vuch 
a hxjle l .Hi be labeled effectively using ,1 minimum of 
labels. 
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cflflSml. such as an edit.; l€« Tick 


'-■ 7 » unpnr* *0 |h?SB 1 o ynfl 

ms VWy 

lirW**'! liTWtSIS 


Pioriutl’ Prcfl 

o 

0 

o 

o 

o 

o 

o 

o 

Ptuijurr Ij.jIit- 

o 

0 

0 

o 

o 

o 

o 

o 

Praducf £#*ifi 

o 

0 

o 

Q 

o 

o 

o 

o 

f FMt 

o 

o 

Q 

o 

0 

o 

o 

o 

k - Sltf 

o 

o 

o 

o 

o 

o 

o 

o 


6-10 


fliifinijj': 1h>s Msgjn i.sfi? n mir.imimt iH InSdi. ii is nlHivi-y 
siripaftta (ffldefatefu) and use. 
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Check Boxes 

A checkbox i j ii’vU Lci turn J specific optical of! of Oil. Check boxes consist of J, orull 
jiiitl it label tn right or' ihc- square, In its started or orr state, ihe ^uare includes a check- 
in .irk or X. In iix imiiilrt'fnf nr off state. the square is empt)'- Von can »1«1 or Jtwlrtt n i heck 
box \n clicking cither ihc small squiit or thr label, similar Id radio burtons. 


/■Kdi ■-■dm-. - II -ail Lsaa lit adif*- pouf uAMVtv 

-pm i -I i mi 4fplr 

E)hfcu:rt*fJi 
O V^fitflMH ufitapn 5 

Bwtadtaftti M T 
=?V. i iIlw-. P 
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A>: l ■if r*!ti ylivi. '.ni, “S«U‘t:. is m\ Aflpl r ■ 
hB#fN5 1C ElMf MndcfSliiild EhAC he ton select 
niQiBihcn imi ■ is u ■ k bQK 


When In Use Check Boxes 

Use a. check box when ™o have an option or value that mu si be 
Vt on or nil i ndcpenili'ii I ol .inv other upciurt or value. higiiie 

6-11 shows a set of check bows. 

! 'se check boxes when (here a re between one and approximate- 
Iv eight options, If ihe number of check boxes in a group will 
rtuxd this number, use another control, such as a mi.iii; ii 
selection list Iket. di mussed later Lai this chapter. 
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Lk* r- chfickbDK '/r -- h '* the E^5i:t c-rdeflecting 
Ilw \i jk = cIssl II ir.e is amUi^uOiu^^ as i*“ 
Bui l<l -iin ih*. irk uiu idilin lJunaiu 

iiiflaad. 


When Ho! Id lilt Check Baxes 

Like radio buttons, check boxes should never he used to toil:.ale 
an action such -is navigating |n a new page or screen. hut to set 
options nr value,. Use a JitTcreni control, mll Ii .!■• .i pushhullnn. 
for ti.iv iji.uinn or other actions. 

Don't «s^ a chsvk bos un-k-ss the opposite meaning of the check 
box l abel is dear. bigure o -1 _ show s m example of a misuse oi 
a check box and an improved design Ming a cLillereni control. 


Libeling £Ji*qk Boxes 

Label check boxes similar to radio button labels. I 'sc sentence-Style c.i pi tali 7Jtion, and do not 
iinludit' punctualii»n Uilk*,x file diet k host activate' j '■eparate control and serves as a label loi 
that control. VVhvllcvcl puSsibk, try lu fit the check lies label on a single line-. It llv label Call- 
not fir on one Hue. then align ihe square with the lop line of text. 


Text Fields 

4 * 

I ncTe ate Severn I dirterem types nl text fields that designers can use tor eirher displaying tc\i 
nr MCtivins 1c*S that the user types nr pastes. Tost boxes ,ire for displaying text that the U'L'f 
' .'11 wb'Li loi 'Spying ,nul pasting 1 o Jiiotber location. TlH'y are also used tut reteivijig text 
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fllit Slit Um.‘i provklrs. Rich-lcxl buses ji’l - tor receiving um.T provided text that can have $p< 
u-il eisiphjMs (in: . 1 - holding, undeiline, and mlkv Main text fields,in for displaying jion- 
editeble, non-wJttiablc text such as that used for titles, labels, and instruct kins, 

On the Web, nearly any wu that is rn>i a graphic image can be selected and copied to the du- 
hoard. Static ti'xt fields apph ro siiftu-iie CreMcd for non Wei' applications THrWeh also sets 
vnneol its t«vn ruli ■» for displnvirtg text, Ior l-xj tuple .n ■. text tlisj>Uyi-.,l m s, -ul.ii lcx( bin. 
in automatically editable. In Windows and Macintosh applications, designers speedy 
whether or not a acrolinj tot bo® should be editable or not. Web designers can simulate a 
nfin-eiiitah]e *c rolling text bos bye Wilting a frame. 

Text Baxes 

A text box, ilsn called jii edit £«ntr«l kn two major itmdes uf optjrutiofl, |l can be config¬ 
ured to enable the uset to etuei or edit one ur mure lines of text It can also be configured to 
dismay test that the user can select but not edit- A text box's shape is rectangular. Tin.* back¬ 
ground solar nf 1 he lexf lwis refliM* whether its lest can or cannot be edited. Editable text is 
usually displayed on a light colored 
background such us w hile, and the box 
itself is given ,in, inset appearance, ETleiil- 
ing it looks like it is sunken into the 
background. 11 can be configured to die 
play or accept a single line of test or 
multiple lines, as shown In figure 6-13. 

When con figured to support rwultiple- 
I i nc use r in pu t. a text Ik Ml SLipjHirt s word 
wr«p, meaning long lines aw auLomati 
cully broken at word boundaries, and 
the user tan continue to Wpe without 
pressing the Enter key TO break lines. 

lexl i* entered into an editable text box 
by typing of patting, When editing text, 
characters are either Inserted m from of 
the chancter at the cursor position, or 
they overwrite existing characters, 
depending on whether lh<3 keyboard is 
in insert or overwrite mode. Text boxes, 
can include vertical and horizontal scroll 
ban. 111 generali avoid horknntally 
scrolling text, an it is difficult for users lo 
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Some wflbsrtes a-mtl software- 
pig grams, CQnfii|uri3 single-line 
text boxes to store more text than 
is visible at one time To scroll I he 
hidden portion ol the text into 
view, Ihfj yser must use the left 
acid right arrow kuys or Other 
cursor-control kevs Try to avoid 
i.isi11-| e igxi 'mix in ihis manner. 
Esther make the text box wide 
enough ta handle tha longest 
possible lhIi y.. or increase the 
verticil I Si*e cjI iho box und sup¬ 
port more than one line at text 


IIP 


11 is butter to have users sbIbcI a 
choice From a list then to type an 
emiy, since users often make 
typographica: errors when typ- 
rnq. As previously mentioned. 3 
possible exception to this is U S. 
state abhrovianons, where tha 
user only has iwo characters to 
type. 


tipmtU- I he scrollbar control* while Irving to mid the text. Vole lk.it .ill 
scrolling text boxes oji thy Web are editable. Currently, lh<? only way lo 
mite a nmi-edilable scrolling t-exi area is by using t'rama 

WHEN TO USE A TEXT BOX U*e a text box wfifn you need the user to sup¬ 
ply ntiinni.itinn for tin- software In process. Also u*C it when von have 
II|J;.|; : .il . ||. to display ill il '• ■■ H Mpuld llkt the USCf ■ I':' iblf to idtct 
tor copying lo a difl'i-renl Hoca.tii>Ji or program. 

Example* nt when lo lext boxes lor accepting Lexl ctttrv include 
when requesting: 

* Personal information, such a* the user's name or e mail address 

* The name of a new file nr either entity I hat the system -wives 
A search won! nr string 

* [>r comments 

* A response box tor a short-answer quest son nr essay question 

WHEN MOTTO USE A TEXT BOX Uum'l use an editable lex" box lodis-pL 1 . 
a label or other static test. Sftrttc text refers to text that is not editable, 
but i* simply displayed for information purpose*. When websites or 
software display labds or other static information in editable text boxes, 
users get confused because they can change text that is clearly not 
intended to he editable. 11 is Jaktr being able Efi Jlange the Street name on 
a corner street sign— even if ytw could do il, no good would come nf il. 

I lon't use sl.md.iwi levt boxes when ym.i want user* to he able to include 
cmpli.isi-. such as bold, underline, or italics in the text Chcv type. When 
■ ihj Want users to be able to use L hc.srs | vh. u I text-willing I'l-.lL lli l s. uw j 
nch-trxl box instead- 


Ridi-Text Bakes 

Ri. ii n-\i Icisc* include all in ihe t ikl res of standard IcM l*uvc>, and they support special test 
attributes Midi a* fuill. font siie, bold, stalk, unde rime, and color. Hicli-texl ixi.se:, also support 
paragraph formatting Options vuell as indenting, Lab-., alignment, and numbering, 


Sialic Text fields 

Use Malic lexl fields for dlspl,Lying non -editable, linmckslabh ii ■■ i v h as lilies and labels In 
nun-Web Windows or Macintosh software, In mosl casei, uianga non-editable text box can 
be used insiead of a static tcxl field, unless you specifically want in prevent users from sekrt- 
mg and copying the text 
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Hypertext 

Hypertext is A special form ot text u^edi to connect the user to dot uments, Web pagjrs, or other 
linked content Words, plirises, or passages oin he designated js hypertext and il isplayctl js 
underlined lexl. Hypertext i» explored tun her in Chapter?. 


List Boxes 

[here ire a number of variations of list bnratotmls, each appropriate to specific situations, 
I-i^ore6-M slide's some of th^difTcrcnl list box types, We'll slart hy describing the overall fea¬ 
tures of" the coni ml. tlvn explore tlw varialions. 


'5i«r-qlf- i-uk-m-un 

I nd 1I #E 


f tf-«nd*d ^ftlBown 
1 ltd Um 


Wi; ■:|i»- Sflg-rton 
L nl EIua 


fj I] 111 r 


6-M 


tofri Saw**™ ji 




Rrt^Wftl 

Dprjli 4 jp-2 

Cn^aldW^T 
F \&*. I- iij-tfl 

ft-d Nnemy 



I □ flfHl Sttrr-H 
J tfrppllp P^iUn 
R Fc*1h 
□ 

3 L4m£i!« Aj+ra 

g DhidM Wtof 
□ Fi^fa kaptMl 
O l -- | Hl HtaW| 


Hi Ella ar* Jj adliE^y^l 
Iik? hnJH F: available* lr> 
cHe interface designer. 
Which *vru&s- tea 
m^fic -hMicius iuncuons. 
anu wt^iLh h dn \\wr 
PuncljeriB ? 


UH*p C&wn 

L Bi 0«C 

f£M«Q 

|-C I'allfi: Fwth »j 


(Of*™ 



frim-ho ftp* 


[CTufii? Fori|h 





r^i r wf,t 
Lwx A>bs 


nrn|| fWwn 
i'.IlMBLi* IkDk 

(Ck>Hdh 

I ‘ nuika J :rl11 | T | 


I- « 



I Kr hov s N |-ri/si-iir n \W, i f rvhifed njili n - 1 r - «.■ iv,t. The 11 -l t m-lfiKnm; ■■ r r -rin. B «11- >i^ -.» 

from ihc list. I. is I boxes can b? configured to display one, Him?, or all of I heir choices at a Uni?. 
If there are nun'e options than can Ik* displayed in the available space, the list box can scruU 
vertically. M the Ini is mil wide enough to display the longest eniries, you call: 

■ truncate (cut off) the part of entries that are longer than the available width 

■ Indicate each shortened entry using. ,in ellipsis ...) in place of ihc missing text, (heu ere 
ate tool tips toshmv the l ull text 

- 3’ n able I he liS-t bo\ |o hori^rn la 11 v send I 
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Of these opNons, ihe second one—replacing pari of ihe eriiry text with ellipse* and using. 
r .Li m 11iji'-. hh %huw the- lull tfit—mikes the mast sense. Truncating emrJcs may eliminate intor- 
nriikui roquirtd io make J choice, and horiftipliL scrolling dumld be avoided whenevvi pos¬ 
sible due fo usability problem v When usingelhpsra^how a* much of Lbe useful part ul ihe 
entry name pi possible, substitutiBg ellipses for the least important information. 

For i-s.ample, a list ol company names could include an ellipsis at the end. since in most rases 
ihe beginning p,,irt of ihe company name r - sullideni to hlenlify it. A li*t of path name*, such 
ah cAprograni IdehViLiuUHunedij'.JirtxlLjrVdLici.l^r.eAL-,. might include ellipse* ilk the middle of 
die path. Hince kh.il portion of ihe path may rml Ik Jieiessary Lu identify each entry. 

Sclccursf! and deflecting it^ms in a lift box depends on which grand variaiion isuitd and - 
coiered hdow I ist boxes can also support advanced feature*, such ns dragging; an miry from 
one list host m imolheror copying and lasting entries. Such advanced operations are relatively 
rarely inipjrinciiied. 

When Nm Knes m.- used lor tiavi^lion. some designers include a puihbultun libeled ^Go^ To 
the right of khe bon. Iq effect, ihe pushbuLturi enable* users to confirm their selection. 
Otherwise h a user who dlcidcJitaJly dicks the wrung choice will have Co return Us che currenl 
page or screen lo resded the inlended choice. In such applications, double-clickinga choice 
is the same -siogle clicking it and clicking ihe r Trfi l> button. 


‘Hlftfll*-‘£+4*1:1*11 



■>dr W.i!:> 

ClTTUh 4|thi 
D^ilriWitr 
l : ‘ink r jpun 

C-»l Mwr.F i 


Labeling List Bom 

Unlike .jJki hmtuii.x jjul check Iwwji, LEit boxes do not itispljy label* of their own. 

Vuij I m MLiiix.i-i.-i-k- I V, .Ml, .V .iJiJuii; J U'.U l.dL-il-^ :::l ■! .1. ... -.cm 

fiHd to indude 3 description i>f [he ilenVs in the lihE and Liislmctfons for selecting 
efflries iai ihe list. Use tin' word sHr.1 lotlttcritH 1 rfonosinfj jri item troni .1 ti$| hrre. 


Single-S elec Iran Li si Boxes 


615 


f(!4J V iL h CClU!l 

lit toft* makm if e liar 
Nmt rhi?rc um d \\mip 
bNpfriifis Irc-m which 
lu -he-D¥fl Sefectirpg 
» nhfpce deselect 
currenllv aetecued 
11 •(!•:* Hiduka 

w-inr td iiriAblii uimti 
EH :,v *K-i -liftfW f: J |hn 

f>j|£l=£ 


\s iI \ name sLii^csh. use -i single-selectiun list bn^ whpn you n.im In pfc^hl .1 list 
of reljlcd opcioils of which the user c.m mhit jl^l one. This is ulle of Ihe must vjIu- 
dble euutrob for showing rnuliipk- entnts, because users generally ha^e no JifikulL^ 
undersl jmlinii ih.iE eh L -v mu^t chooseOFIC of ihe options presenEed. Make the box tail 
emmgh in shcrw .it least three in cighl choicrs. JJaturally, ihc more entries mu shuhh 
at once, ill l- Ic^-h iIil- linl-l Il.im Ut mil iu sec Llie TC]iuiininrg choices, f igure (i-IS show 
.1 Lvpic.d sl noting >ingle-M t kvl lisk box. 

Notice in figure ft-!5 that die selected entry h- htglihgliLeJ. To desdeci a choice^ von 
reluct aetei.1 .i Lliltcrtnl choue. 11 Vcm want in enable I lie nser to select none of the 
cnertLS. then you musk provide a “None" option, usually m the first entry in ihe Ieri. 
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A disadvantage m h tin- single select list hox. U tlul users can scroll The selected (h igh I igh h:d I 
entry out hi i jew making li lukbardmasf^tiw M$been made, When iJk voLiiroi ^dis¬ 
played, always scroll the list so that ilu- selected choke is visible. 

I his Support & number of keyboard commands. The user can type a character and I lie 
control will scroll to the first entry containing that character. Preying the same character key 
ipltt scrolls (lie list 10 the next entry beginning with that character. The keyboard arrow keys 
and other cursor-control keys can jh*> be used to JugJtllght entries, and pressing ihe Enter key 
selects the high lighted entry. 


Extended-Selection List Bdjc 

It you want users to be able lo selcsl mon than one entry in ,i lisl, then von might 
U^e jn extended select urn 11st bus.. I n-> type of.io box looks lik. « single-selection 
Itsl box. so users may not realize they can make multiple selections or figure out 
how id make such selections without explicit instructions- although the exact keys 
to select multiple entries varies hs opeuitinp system, the niter can wkil a oonlinu- 
uus block of entries or a so calked disjoint group lit entries—those tlul may be 
scattered through the list, lb select a continuous block or entries, the user clicks the 
first entry in the block to select it, then holds down the Shift key while clicking the 
last entry of the hinds. \11 of the entries from the first in the last are selected. 

To select disjoint entries, the user holds down ,i different key (Ctrl on Windows, 
Command on Mac) while clicking e.itb desired entry, Figure I? Hi shows disjointed 
selections, its urt extended selection list hov Csing cither of these methods to sdccl 
entries, clicking a selected eniw deselects that eriErv. 

because of the complex key and mouse sequences needed to make multiple selec¬ 
tions. consider using a ctnlrol such as (he mullipir-sdection list box as an alter na* 
live to the extend*d selection list hov. 


Muttlple-Seleelion List Bo< 


h«!vr.j v as«lecw»ii 

L ini Bu i 
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iittlWMCUlt IH 1 ihs 
•uitanea, th-u extended 
l«leeliuri hsl box may 
r*qif»rp fiiii-y uflrtrBivfl 
■nstnicucinaUpxt la 
■nfflm users how Tn- 
m&lse rr.ulr.Dl? 
seiwwm 


Mxllipli. Snirillan 

tisi n n:» ! 


~3 

| (Z3 c itHbii 
I □ Cintv V^ilit 
tel ii -iHir- 
M Daiuld AW i 
Fraai Kvl'in 


IB: 


A list box b dkiu I) i group of diccfc boom in a list box. li^ure 

b -17 showman exampleof a multiple-sdectbn Ikt box. 


The muhipk-wk-chon li*r box is an atterntfin; cmmit do um- Ui;lii ihe exieiideJ 
M?lectiftit list box, The f-imiliariLv of the check box controls rwans ihe estensive 
iiiHlriic Oorts-dre usu-tlh onl xecjuiK'd In ilw: ihif. cuiILtuI. Cfcillmg ii inohipl^sclcc- 
Hmi |jst box nixLj- require iht- wort ol j progrjlmiTbfr, Jt il. mjy iloL he jv,m| h iMo 4* 
part of the control* of surne Web- or mullTmcdia-aiLlhcir inji sj^iems. 


AJifiaijflh itrpgulraA 
m :r«- pninramTiirffl in 
n;dUr. • Mil vnufeipto 
fa«lec5iDn 1^- box 
flccnrnpliishfls a- wilder 
ilJ BL'I I Ii Ihu ijkLl Jl ! 
tilercSicsfT li^E hOH. till! 
rgciiiim Ifnver 
in-ErtTUiJtHPT>'ff 
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Us-tf I i SOHIBlllllitt 
iijnnr* drup dijwii lint 
b'<n«r imh renngniiiiig 
mev contfini h I- 
isanapltwis Thisii 
eijMcialfy iilu an 
busy ;■ ii 3m; at 
KCTornng WA*it IMP 
iiw bnKH- cnn grl InSI 

in (Sic cluwn 


Drap-Dawn List Bax 

Thu drop down list hoi works >i mil.i rly to the single xdectiuil lisl box, except thal it 
miiI} dispUyx ihf currently selected entry unlit "ope 11 etl” by the User. Figure (■-]# 
show both l he dosed ,md status of the diflp-di™ n list bus. 

rhu nuin advantage of this control is (hat il requires very litile vertical space, since ii 
norm-ilk 'In ws just the selected enliy. Its main dwxlv .image i- that nvn don't 
always Tuali/t iliai it umuinsMtdilkinjI choices. If you us# a wheel mouse, you haw 
prutahh cumc jctosi another disadvantage ul drop down menus* Some limes you 
roll the mouse wheel downward intending to scroll towards the bottom of a Web 
page, only In discover that ihe tticus was on a drop-down list and lhai you are stroll¬ 
ing different value* into that mntrol instead 

One sohitinn 60 this problem is far designers to call for this control only when it is 
obvious, from its cmncXI lhai additional choicer exist. An example that may come 
ijukkly uind -■■■ tti it ■■■ : • .-t. 1 :l :■. ; ..i,‘ .n. n-.>■ 1 . fifty thS o*tn» *u:r 
usability studies have shown that people can type a iwo- character abbreviation into 
a text box much faster chan iliey can selecr ii from a list. If the user types ihealihre- 
vi.irinu 1 hr Huftwaiv muM still check I he y.ilue to determine if il it a valid slate abbre¬ 
viation, Ii may he difficult lo detect whethci or imt thcusrr has typed in a valid hut 
Unintended abbreviation. sudi Js Ak instead oJ Ah for Arkansas, u il In ml verifying il 
jyainsi die 3-ip code entered (assuming the user types the correct zip code! <. 

\ better example oe when a drop-down list might be appropriate might be lor dis 
playing .1 list of courtesy titles, such as Mr. Mrs., Miss, Ms., and [>r., that a user enters 
when filling in a form. With increased use and familiarity, perhaps we can call for ihis 
eoniml in mow situations. Until then. Hie -single- select list box, which reveals some 
nr .ill of us entries, is the preferred choice. 


A r. I Ii 11 ■> ||i>K 
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Combo Bo* 

A combo bo\ coimliu Ihi-eIi ;l \e\i cin-tl j singk-sdrclion list bos. Ihe user cm 
etitier sdect an entry from lh l- Ikr hm nr type lb*- name of an entry into the text bo*. 
Aidanct&i am: typed, ihc list bos trolls to tlic non** riukhing entry, Selecting an 
entry copied is& niiim? lo the text him. (■igurt ft-19 .shows a wnibo hot with [he cur- 
mah selected entry. 


Itwft ffHfrfi doRtreal 

in ihfiv c h*i tvpe w Wn en to U ss a Cdtnfam 3«i 

in itie cc-ntu; burti 

One c^i aositik box is rb#U it dearly displays ihe curnentiy Rrkctied entrv. 

The link bcJwmi I he text bos and the li^l nu-flns r h,i t lasers can ty|,-ie dl^iracterf tii 
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nwfet 3 selection without removing their hands I mm the keyboard lo use flit muusr. 
Without instniLiii'm io ibis elici t, tkiugh, iivn may nut realize tlut ihas Liability 
exists and wi|] ickl from tile lisl mi'leid, 


Drop-Down Combo Box 

A variaiion ot ihe enmbo hits is- the drop-down comho bos. shuvwri in H^urefi 20. 

‘Lkm wnirol look& Like z dro(M)cim list. The user muyt dick the inemi button io dis¬ 
play the lisl. Once displayed, the control operates like ihe standard combo l>o)v LI 
tan select front the list or type characters to position rile lis( in ,1 par Lieu Ui entry. 


Clffip Diiwm 

CwiLn- Ud:h 

(CtoiwU 

ilk: 1 ■•■111 ]»;■ 


fO|Jt- i 


■. r «olk^ f .iJli 

l 

f^r u*w>i 

■*■ 

EV^fr-T 


C-HflihrS F«ifi 


C*d T Ml ■ 
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The drop-down uniiho box saves space by only displaying tli< currently selected 
entry. Like the drop-down list, users may not realize that the list contains entries that 
are hidden from view until the user dicks (he menu biation. 

I able 6-1 compares (he features of the various list controls. 


A Ji■ r! :w i:4jm|ii: 
hm ShF’ aamft fij 
bi Mes ast*i~ dmp- 
down l&i bo*. Wrtlh 
erthflW#J*IWn 
I u ncLtuiibllly 


6-1 I ■, S I J r.fc . ■ JH : ■ > ■ r ^ 'r^f'C ^ .ftr-h 


last Control 

Co me ms Visible 
Without Clicking? 

Can User 
Selecl 

More Than 
One Enliy? 

User Selects 

Enliy By. 

Shews 

Selection By. 

Sirig-e-Ssl^cnDn List Sux 

lies 

No 

Clicking 

Hrgnlighl 

Extended- So lection Lisl Box 

Yes 

Yss 

-■- 

Click *ig mil! ki:y sequence arid 
dick (or BrtleiHjnig SBletlioni 

HiyhJigl'iC 

Muliip^-$BloEtiDn List Btwc 

Tefi 

Yas 

Cteckwifl its cheefc fanjc 

Mark «n cn kcIc box 

Orop-Pwffl Lisl Bos 

No. must click 
m»u burton 

No 

Clicking 

Displaying as only 
visible entry 

Combo Bok 

yes 

No 

Clicking or Lvp :ii| 

D ie u lav ny in 

text li-elrt 

D "Op Down Ccinfao So* 

No. mult click 
m a button or typo 

Mo 

Circling nr typ«M| 
visible entry 

□ isfila^ing as only 
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Sprimr^mnlifl TNk dartt conlrsl uli- 
i s»: v "-o tp' to figuTi rn-rt Nols dial 
rirufi-iUMri i-stifaif '"nrti irtihe tiirre 
hE-ds : *n 3 v u jw quicker entry Ihe ujj 

rM .bVi- :i lft siuhdrs r ay ^ 

H tn h£ fdSh'v ufcqh^d 2ry Ljine- 
UMff 

I TIP | 

7>e Mcroseft LVjVrtfuw.s 
fapefienee recommends w?ap- 
pinfl the values al erth^r end of 
th* spin linn This moans thal if 
the linga cl values is 0 IQ E r then 
clicking th& up button when 9 is 
displayed rolls ijj© display lo 0 
Likewise, ckckinq The down 
Straw when 0 is displayed rolls 
the display to 9 I proto i to cl is 
uhlu the up button when I he 
highest Vo ue is displayed and 
the flown button when the lowest 
value is displayed, nils allows a 
user who wants To display a 9 lo 
simply dick and (told Lhti up but¬ 
ton until 9 ts reached and the up 
button s a gaoled. Dl course, =1 
tha values wrap, then a user can 
dick rhe down button once from 
0 to display 9, but mu-si users 
would not guess ttiat such capa¬ 
bility exists. 


• i*5 


Spin Boxes 

A spin box » lin'd In alius* users to select one of a ningjr of continuous 
values, ['lie spin box control usually consists of an editable text ho* aiul 
3 set of buiions known as an up-J (hvji control. Ite value in the box 
innrascs is the user clicks the up button ami decreases as she dicks the 
down button. \lteni;irivc]y, line- user can type a value directly into the 
I-hhs.. I 11 : l-* fp-Jt shown thre-L- sjiln lnu.c. uwd In enter the month, day. 
and year of a date. 

"L he spin control c<m be configured with an uneditable text box. When 
so coni inured, ihe user niusi use ihe u|vand donrn buttons. io enter the 
ck sired v, m |r ihe range ol possible valui- i- largi ir car he annoying 
to wait u mil I lie desired value is d i spl asvd. It is generally heller in use the 
editable text box. then check thal a user-entered value is <• alnl and with¬ 
in ihe correct rangc- 

Sliders 

A slider, shown in 
Figure6-22 allows users 
Lti ^LlxL vne of a range 
of vdlits by dragging in 
indkalor along a h^ri” 

7ont,ik or vertical line 

The slider control Pits 
btfst wlun you want users to be able to amns a continuous range of val- 
uts. Ksr simple, vuu could use -.i group df six ntibu bullon.^ labeled 0 
la 5 P to control volume. With so tc\* selectable values, however, it is 
unlikeJi th.it ihe usor would lind the exact desired levd. You could add 
imm iibdio lniilnns representing finer volume grajdadoius hut at Ino 
high 0 itHtp u’j] estate tost. The slider control ensures tint men: kin 
select just the setting they warn. 

Tab Controls 

labs iire a useful means <>f wganmng conlent In a w<?bstie nr software 
program. They work just like their real hfe counterparts—serving as an 
easily accessible means of c,iteaming, and during controls or content, 
figure 6 _M shows a lab control typical of many a^kitimu 


HaMOmhfflf# F.l(r» F«J 
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US4 l\ v L-uJcr LannuS v.liu i r :iu wiRi n\Uir$ l-n .ha 

ah i! Ij ntdiisi a cpvUimioyss r«nEH 
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TIhj 1 Li tunin»l eHa£l»lH|| 
pfjitni/fla toniatil into dis 
c rc-if q?oi ips. 



Da not use a slidar to provide ac¬ 
cess Bo a multi pa ga HMunwra oi 
tor othar navigation purposes. 
The slitter does not offer the preci 
sion needed lor such navigation. 


Tabs are grouped in One err more rows, although we J ve mentioned earlier lh.;U multiple nows 
of tabs are lo he avoidml. A l.ilul- uIiiSom always j text Labe!—identifies, e#c|i l.ib. Clicking A 
tab makes it the trotiinwst mb and display ii* contents, 

L'are the word dStffc to describe to a user how to select a [jk J oa exam pie. "If you wish l to change 
your account setting*. clink die Accounts i.ih. 

The use of lab*. is explored farther in Chapter 7. 


Tree Controls 


A tree control, also known .it ay nul line control. i- an efficient, *•{<<■ ■ iyiijn-d iy|vof menu fyi 
tern tluii iii'^juit/es items uitng an oulJiiiv formal. Bee jus* it otganixes. hierarchies (such us 
LJ 1 ers, , 'iLri)uph/dejw1me!jL> LonipjiLv i so well. a ttWCOtlltol is espiM. iallv lUtfill .n .aim Host r.i- 
tive applications, The administrator in charge of such an 
application is often an experienced user who is ' iniili.tr 
with lhis type uf control. 


* :~. T ~! 7 Ti l 


Typically the loci selects ilie desired item by clicking il h 
which displays choices appmpiiill*: lo that item's lecel. 
Each level of the outline can he collapsed to hide it* 
subitems or expanded lo show them by clicking a small 
icon adjiueill l» the item, l-iguie i 21 shows in outline 
control used! to 03 gait \/x a .school hiL-rjrJw. 

U not lor the tree control* (hen acLCiiiiijs alL uf Figure ti¬ 
n's lewis could requlrea scries of drop-down lisl boxes 
or similar controls, The user would first select .i school 
from a list, which would display a Hit of the dashes in 
I hat school. AJfei selecting a class, Llie li. iuEJ sec a 
list of students in that clasfs. Selecting .h siuderii would 
display her assignment list*. which would, in turn, dis¬ 
play ihc assignments in that ii.nl. 


is* fck ■ f \M * • 

rrr fefc QtP*ff Shrlpryt* 
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fcuiw n-«n 
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fhe Ltm &aciiTDl orqzwLtrti Idi pfl MifMIltas or »nFLwa 
hou Jhe r»L'ii j ihiil dismayed nuiw ui* user cUi>i, an 
M 1(1 lUltftS la-llv cUu clmicffs IfUIl Lflflafl luf lhal 
tfivnl 1)1 thr Iiib i . 3 1: |-hi 




















rlwiretuiminii displays the wlhilc iiriiktiid' j.i unit. It reduces the number of tlkks Jiid [ires- 
dilation of new list-,. losic-iut of rqwatedlv strolling, sdeu in ig. then Hjiujig tor the wsuhing, 
list TO be displayed, (h-eUMr simply opens an item rn m ilc ramems, Becauve new lists don't 

I lii' ■ ’•■'■.■ I'- ' ■!• • .Ill ' ;. , ,Mifi, mtli li I.! I- III ; I ? I.1VS ■ Kp ’I'LL 11> i'ia 111 V- I i - I ■ ft 

dally rlni.v uittiittld via dial-tip, Thwe who are iufemted con find commercially available 
nee Lomrob for many operating systems and authoring environments. 

J fee controls ^an fuse inexperienced uses* lor several reasons. First, although most people 
are familiar with an outline forma I. users who aren’t familiar with the tree Control may Hot 
tMliiv ih.Lt there can he hidden mhitcros within an item. Second- the function- .vhsiv fated 
with each item are often J(, lisihli: only hv J. right iiinusc click on Windows systems. Once 

users are iaught hnw the control works, (hey can take advantage of it) power, but they may 
require framing 10 do so. 

Creating an elkliw user mlerfice means combining the tools we have explored in this chap¬ 
ter in efliC ieur, easi Id-Understand wzlys. With praclioc and experience, you will gain confi¬ 
de use in ynur ability to select the correct combination tools for any design challenge you face, 
hi ' iluplcf 7, we wilt investigate the role 1J1.1I controls such as ihcw play in ihc-deiign Jiulciy- 
jlion ol etkctive navigation. 



* Cascading menus can provide access to <1 targe number of items, but their design can make 
mum difficult to use. 

* When n re aiing pushbuttnn tafonls, choo s a la ba Is 1 hat a i g bi fa f. yet self expleoalory. 

* ise rfldm buttons when users can only select ore of a group 0* choices- Use check bones if 
li SerS- can select mnrs than one choice in a group 

' Avoid requiring users to horizontally scroll text, as it makes reading the tent very difficult. 

* 1 here are many varieties cr list boxes. Selecting which type to use depends on such factors, as 
the nmnlieT of items m ftio list the number of items to display at once, whether users can select 
Qtiu or multiple items, and whether users cew type (be name of an entry. 

* Toll (i nnl rfrls are useful In r nrga n ?i ng cotiflori l?S 0( C(1 n(e nt ard nonlml?. h e s ure thfl( Tho cato- 

gone8 btc peers of one another. 

* Tree controls can manage large numbers ot uoms in an outline format Thav work best with os pe¬ 
rm need users. 
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in review 


. What is die difference between an access key and a shortcut key? 

• What type of menu item is dependent on the settings of surrounding menu items? 

J Under what conditions is it accepts hie to include a radio button without o lahsP 

. What my His namns of th« tnur common turnon states, and what is each one's pur¬ 
pose? 

Which two types of fist boxes can look identic cl in both their dosed and open 
states? What is it a bout their operation that distinguishes one from the other? 

& What is the major advantage end disadvantage of a tree control? 


exercise 


You are working on a wnbsite for a stare that sells rn.rsieiil instruments Yiiur client 
offers five types of Instruments (brass, woodwinds, percussion, strings, and utuc- 
tramcsl. Each j1 those types includes between five and !D instruments. Sketch at 
least two d tterent versions of a menu structure that allows users to select instru¬ 
ments of each type. Describe the advantages and disadvantages of each menu 
typo. 
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objectives 

txamim Ihe eleftscnila al iiavntfalian 

Amtiyris vahaua lyji&ii *if ntuviQAliciiiHi system- rindudiny mii?iiii‘. lnh> silo i apii, cateqLncs, 
Compare uflint am| bad tnetici and mb designs 

Analyst- ns»igation ; »L stejiiei'.^ such nintnui, braadiMumh trails, luit , and imai^ maps 
Examine advanced seacdh syulenxs 
Examine suncml ned navigation ilc-srrjn 

introduction 

Nauitjpl :Mi iss Dig maftHSh by WHith 4 ] wu-bsiks Dr mullunoilia software program provides b z i: ess to ds 
c extent—the ftBfturas, function and inFormartion that art Ms ‘taion for being As waVa noted, the 
ta^twmh which a user canftavigala a software program or website can be fl£ important to ic$ sc- 
cesi is ihe gudhiy o\ *ts concent The best nangiilwi systems art nuity iwisjhle P fteamg users to 
fee as on the conleid ralho-r than rts mejns al aecoss. This chapter wilt help you tfiJUfln iiDvi-nnlirm 
systems that meet this stamderd 

Tbe British archit-E^t Christopher Wren I1B32-P7Z3J was dne ul the besl cnowri designers ol relieve 
campuses a! his day Wfltoitlfid campus buiMMg* complied, Sir Qimltijphfei 1 would delay Hu; 
construction of farmal walk-weys lor a year He lal Shm atudenls rreato fbair iwn natural pacha in inn 
dirt as they mme.n from one building to snochec Although tins plan was likely to cause muddy floors, 
j[ SuCCi'ttoCd m sli0L r .-H*ii,s I^e^dy where Lbe walkways needed tu be CDnsLiuLied. She most hea^ity 
h ay el ad p«ehs were buih wider than the Ipis-lfatilted om, Wriw't Jlpp roach i« i hni iHimplu of 
dEsigning re your users' neads 








uo 
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ELEMENTS OF NAVIGATION 

I >Ucu4Siiuu «i johi» 4 K navigation fjiteras often use the nic.- ! j.|i|]or ol a city's shed system, 
since they confront many of the same issues. We travel on streets to arrive at specific destina¬ 
tion^ or we ride with no specific end in mind, just to enjoy the adventure. Likewise, some¬ 
time* we seek specific irilnrm.iirun on ;■ website, and other times we just want to htnw« atid 
take in the sights. in unfamiliar cities, we depend urn signs to tell us where we are and how to 
get Ed where we want in i>o. In software, button label*. links, nod other interlace element-, are 
the signs th.it help ns find Our destination. 

hike software and websites, when there n only one txi.hI. ir t* easy to find your way. but the trip 
may t.ike .1 long time nod 1 ate you out of your way. Crossroad* and shortcut* offer choices ihut 
l.LII nuke It easier In get from pl.LLC 111 jil.ltL-. bill -IS l lie inilnbrr of .nailable p.llhs increases. !iO 

dots the possibility d getting lost. We depend on signs to help us find our way. but, as figure 
‘-I shows, too many signs can be as confusing & no signs at all. Similarly, too many choices 
presented without caret id thought may render a wi*hKilt: r>r software producl impassable 
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Tug many signs 
ran ib m-nr-e ^on 
fusing lha*i Idd 
Few signs Fhntc. 
Sry ikfl authoi 



WEST TO 


POST NEWAPK 


NORTH AREA 
AIR CARGO 


OO 


SOUTH 


Main 

TiritnJnals 


Rethinking Navigation 

In the 1700s-, smart city plan nets, nlvli ,i> ISeiiianiin franklin, began laying 0U1 cities ill ,i pre¬ 
dictable grid pattern lur ease ol use. Lius was in eon train to citto *uch .is I'arLs. whose streets 
an- a maze of seemingly random angles, m ult hired intersections, and dead ends. Although 
many won Id argue that the com|'le*ity ol Paris’s Streets .1 dd* significantly 10 its interest and 
appe.ll, few would argue lh.it il is ,in e.ia tin fur xivilni's In 1 i. 1 viy. 1 k- 

Nciminjj parallel Street* with Cuiwccutm: number* and crocs stiwts with consecutive letters fur- 
ther euhiiiLL* tlu-e.jM- of uv m ibc pa id, making it simple t» get ItUil) am-CdtIMf to any Otbtr 
aimer without offimsivi siglls or dirtttioiuL As website and software destjiners. we want to grve 
our user* a similaradvantage—to access .my part ol the si te or software from ,inv other point with 
J rtnniinnm of sign* ur directions .ind in the fewest huhiIht of dicks or keystroke* possible, 
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Kcrp in mind thal city stmti are not the only metaphor used |u dm riU- iiavigjit inn. Olhur 
tl 1CLjphurs iildiulc: 

* Turning pages in a book 

■ Shopping in the .lislcs of a store 

■ Instant Ilekiransporting, to any destination 

■ bring brought goodies hy a serv.lint nr granted wishes hy .1 genie 
J Sw itching channels on a telev ision u:\ 

■ Dropping breadcrumbs like I failsfil and (jttld did in find ikcir way home 

* Traveling in an elevator to different Honrs in an infinitely high building 

* Selecting ilems from a menu m -■ KSlaUMIlt 
■■ traveling in a time machine 

* Searching for gi ld in river grave] 


Regardless of tlie mvMphot u«:d to describe it, navigation Lin he boiled down to: 


■ Signs tint identify where we are 

4 Signs that tell us what is aval table ^^ 

Controls Lhai initiate actions Us« rj .| 6!i l0 donlriy :aties ur sereins and help onent .se s 


Signs That Identify 
Where We Are 

Users depend on signs to idenlih die 
current screen or function in soli- 
wary or a website. Figure ”-2 shows 
examples of these signs, which 
.nJudt sq»M ■ i | ■ .1 in.- lit leva id title 
bars. I ho hf l]i orie-nl users con- 
fuming that they have reached the 
proper destination Of 111 ads' the 
i me i il I L-d sc: k-L tit in. L nc I ud c i h eve 
titles whenever possible, and posi- 
tion 3hem prominently ntimidly 
near the tup of the screen or pageJ, 
-a.< that users can see them easily. 
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A Step in the Right Direction 


Whan s earn hi ng for n store in an unFamiliar mail, many of us- head directly for the mall directory With just two 
pMJCtjfl ul mtorifiHion—our current location end thA (ocettiwi ul oui tarjui store --wa can reUUivoly easily Find 
gur way In any store. A* a CQriwe.nieiice r the map displays pur current kinatijon, usua ly marked, "You are here." 


IF we «ra IqsI on an nc^iilim mad or highway and ara trying la find on* way using a map, vro need to look for 


the name of Hie road we are on and Ova names ul two cross sLieuts in the mder that wu grossed Ihem. These 



two sequential crossroads enable us to beats our present location and the direction we ere heading. The mil 
directory doe* ngt re-quire 115 -to knew which direction we are helping because it *5 oriented to match She direc¬ 
tion we are feeing in nelevfonshnp to die fayouc oi the mall. OrrfrnvioQ the directory map accord inq 10 dip user's 
point; of view a sigrciFigpnt usability enhencsmenl, Themed isnptlhf pnlyplec s you c*n find such smart maps. 

In 1996 and 1937, the city of Philadelphia ^stalled dozens of disk -shaped maps minted on potos throughout the 
downtown are* The maps, knnwn colls ctiyely as Walk 1 Philadelphia, help visitors cosily find tiio city's many his¬ 
torical sitos and tour¬ 
ist aHiacUons. The kay 
to the system's sue 
Cfi$S a ItiH-t. like iFte 
mall directory, each 
map is oriented tp 
match the viewpoint ol 
Lhu qe-OESlfieri. Which 
oyer direction you are 
tocnig appears at the 
top of the map. Figur# 

T -3 shows ona oF the 
WilkFPhiladelphla 
mdjjs, designed by Joel 
KatzOe^p Associates. 


Dnenling iFme uiy 
linos tn the ibectKHi the 
1 EhfldBf IS laLj-ig uh-dtlv 
ificimiFbfia dioii 
tffethmiiMS 
F'l iri ny u> n ‘ 1 r 
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Signs That Tell Us 
What Is Available 


-Signs ihjt tdl us wli-il is iiv.iil 
■ih'.c include piuhbmuiA label *> ? 
the text of hyperlinks, and other 
labels that givc clue* about wfmt 
will flipped when we iKUvdLe u 
crniln>l. These iLgnH ire Like the 
destination signs on the front of 
buds that help pas-iengers iden- 
tify thccofiwt bus. 
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We depend on (lie wording of 
labels and other signs to lidp us 

make correct choices, but some labels, such as ih<i*e or pmhbu linns, 
have very tew words whh which In ftft iheir aero**, Devices 

Stwli as tooltips, (he -m.iLL text boxen tint ire Jiypliyed when We mil 
over specific controls or images, enable designers to give user* more 
information about the effect* at activating a control When tooltips 
are used appropriately, they enhance usability Some wchdlcH, howev¬ 
er, either don’l use theni In full udviinUgr or allow tln-tn to detract 
from usability. Figure 7-4 shows an example of a tooltip that partially 
obscures the same text that i* already displayed on the page. This 
tooltip simply adds visual 1 lutter ta the screen. 

In some Web pages a ini '.nftware programs, labels are "dimmed'" l>y 


tins tMllia reacts infL-ina^ia ■ alraatfv pmvulird ■! >d ubstriHfc usi ;J yl ieo!:rta>j^ 

iL L 'IilS, Vr'fl.E I II = d □ shnsild jdd EIGPrl .1 L II 3LJL- 


TIP 


Whenever possible, try to match 
the icresn 01 page tiHo with the 
label do tire control That takes 
you Uiete. For example, if a push¬ 
button label says 'Today's Spa- 
d al s." then tty to in cl ud a tli is trtle 
in the page that is displayed 
when this control is (ictivated. 



reducing Ihe conlml between the text arid its background indicate 
tint the associated control uUlIWt LUiremb he selected. Since It 1 no! 


always apparent why the control has been inactivaicd, this exit cause tru ? 
tminn among users, in peiKT.il. it is better ta t ompleteiv remove » con¬ 
trol th.it cannot be accessed I‘.icIil-i th.111 display il in, rt dimmed .stale. An 
exception 10 this, is application software di.doj; bosew where uimiilisbk 
controls arc usuallv included in iheir unavailable stale by convention;. 


TIP 


Never allow a user 10 make 0 
selection, click .h button 01 oth¬ 
erwise 1 activate a control if it 
doesn't make sense for iho user 


Controls That Initiate Actions 

Controls are the pushbuttons. links, list boxes, and other dcirnmiH ih.u 
we explored ill the previous chapter As wc Icjtned, rJch has its own 
characteristics,, strengths, and weaknesses and each can be an effective 
component of navigation when used appropriately. When used incur 
rcctly, they confound and annoy user*. 


to do K Nothing is morn frustrnt 
|ng then a system that allows you 
to activate a control than dis¬ 
plays a message telling you that 
you cant do chei here 



















j -• rj|. ■ i ! ’ i -!. hi iM I | 


144 


COMMON NAVIGATIONAL SYSTEMS AND ELEMENTS 

I lw purpose •!»[ navigation is (0 us lo access whit we want m a* few clicks or steps a> 

possible. Some design?™ live Ivy the rule rhat a user must be able Tn rf.ich the desired destina¬ 
tion in three dicks or leu. All hough r«rnl studies dispute that UWf' '■'ill ;i bindti n .1 Mir or 
soflwire |hal viitLiEts ihis rule,. L'lfurts by Jcvigiieis lo reduce clicks or steps are [Ullldllduu 
worthwhile and essential. 

MetNods of Organization 

I'ltere are many different ways lo organize the content ori a website or multimedia software 
pm^i mi Applications s-uvh a> v cnmmertv sites must mgiinirc many individual Hems, yet 
allow very quick access lo their items, using a variety of enter hi. 

Iwo common meins of providing access [u lots of consent is by organizing that content into 
categories jiiJ by providing 1 search tuucUon. Studies of online shoppers performed In 
groups such ns ^ ser Interlace I ngmee ring show I hat mod die viators intending lo make pur¬ 
chases prefer using categories rather ihan search to find items Some shoppers ignore the 
ic,1 ich function entirely or only resort lo using search when they can’t find ihe desired ilem 
hy navigating tin- cjicguriev 


Categories 

Ills uiU'gtuic" used to cuganize items must be welt thought out and (.wider both die hem* 
and (he audience. Jt Our e-COmnicrLe site offers cialhing. lor esampScp obvious major c.itc- 
y(irit's might indude Womrn's Men t'drlV, and Roys'. When a user selects a mainr category, 
the subcalcgory items for dial category are displayed Women's c Ini lung could include sub- 
categories for blouse, dresses, leans, shuns, Mviimvear, lingerie, i-shirts, etc. Selecting a sub- 
category displays the appropriate items in the cfnltt of the pag£ in what is often referred to as 
a prod net ya I lerv. 

We must also anticipate other means by which shoppers might search for items. Using our 
example other possible dething subcafcgnr its may indudr 

* (lnthes by a particular di-apur nr label 

* 1 ilmhing for a furtkuLir body type 

* Clothing for petite, tall, or oilier hard-to-fit sires 

* Sale nr chise-yut items 

* Rut sellers 

■ Oolhuig espec ill I y Milled ,1 s gill:,. 


' N’ew arrivals 
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providing diffeieut HtQoritt tit contrnl provide! k’ltcr $®rvlDC to uurs. if I know I 

wii'i iu find j shift by Ralph Lauren, why nuke me look ihrouj^i chills by many other dcsign- 
(fij Or the other hii!tl h vcndorsilan l want to mib the opportunity to sell related hems, If I 
like a particular shirt, maybe Vl\ also purchase some khaki pants to go along with it. 

T preltv making both the major categories i Womens, Men's, fairU' .md Boys' in nur rK.imple 
and subcategoHitt (blouses, dresses, jeans. shorts, ett.) persist throughout the she, This means 
that ihese menus jk displayed hi the same location on every page. When a new major cate¬ 
gory is selected, then the sulxale^iries for that category replace those of the previously dis¬ 
played category'. This consistent placement a ml universal a a ess allots users to instamlystkd 
a different major category nr mhc.itegory without has Log to search for the appropriate menu. 

Sometimes one of the subealegufies ntt|Uire* further classification, For example, Lhe client 
may want lobftakdWB jtant into loose lit, classic fit, slim til, and In-rise. If sy, ihen consid¬ 
er indenting this menu under the jeans item, like the menu shown in Figure " R .Don't replace 
the subcati-gnrv menu containing blouses, dtttftt, iciins, etc., with this third-level menu, 
though, or your users will have to hunt fur the subcategorirv 
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Hotr 15 ^ innd g^nmeif've So thfl 
rairHdin:; ma^n syi- 
tf -m |i iSLserul k'ffiEn ?-r& hti 
C€iis%iiy nli!iu iE^irs^ m Qifflii 

\iv NwpiiwrHiy. *ihJ thtri 

vi . -.>■ u submenu slm : i:- uvu' 
■nr nil llirtr 


Search 

March engines .m h ,i*. i irmgk gLpeof .serv* prim,™ lm-amol to \ ing CtfntCrM ■ ■ n :he Ueh 

Within a particular wtbtite or multi media software program, sc mr users find il helpful to use 
d search fodture to find particular content. Many user* view search .is.l means of bypassing the 
site or softwares navigation m get right to the sought-after contest. Others use scorch ys a Iasi 
mour*- only resorting to it if they can't find what they an 1 looking for l>v using the site's 
iiuin SMVigiHiun. 
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.V- i-ii Web i$*£dtk sHeiiUow wv Lu conduct u precise seaidiby inducting in llie search field 
symbol* smh ai quotation nurk- and plus. !t ind mmu> ■ ■ wjJjili, Often logical upeidCurS 
such as"an<T and "or" can also he included to rurmw she search mulls. Such features are 
valuable to thoae vvhu undemand their use, bm they are beyond the iindciHiadding of many 

h -| \ S .111 -:li- . 1 - 1.1 -Il'-A k ,.i . iK-IU-ll ftLhtVi .1 ..ii/klh lIl ,r. HUlI v.ji Ji system I: i .1! .mil. 

(pates the type of searches the users wil conduct, For example* Figure 7 -r> shows the search 
SLieen fur j fiord design software application. It allows florists to search for dowers and other 
plain makrial ihal meet certain erileruJu such as htaorrung season, u-Sage type 1 focal point, 
filler,, etc.}, color. -md vase life. 
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Navigational Elements 

WfL^Mc^ ami mullimcJij suftwirf i.lit-i .1 number of different common Luuigalkm Nvwiiit 
.jihI dements to Mw Lisei s loateew content. Hkk include mentis, ejIts, hyperLinked texi or 
graphics, the! browser's lijck and honrard buttons with tln-ir associated lists, breadcrumb 
trails, iin-d m.nps. Thi-: lisl •■■. hv no itu.ms cnhjuistivr, .ik dfsignfr* . m Lpm'nl n.ivi^.i 

tionnl tlfVMKMo fil the needs of the suftw irc or silos they crcjlL- 
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Menu 5 

Neatly all WL’hsilcs and mullimi-iEia software list’ menus of l 1 uull l h to 
enable users. Ur UCCtSi fUACtkntt an J content. Ucsiiio (he system -supplied 
menus discussed inCbpter 6. designers and dmlepenoften c reate their 
own menuH, represented as 3 scric: of rpvt items, pushbuttons, Icons, 
hyperlinked :il iletm, nr ns -mi invite nuy> 

MAIN MENUS Many multi media software programs provide .1 top-level 
menu tiuil organize* the ->01 Ware's contuUr Such .1 menu is commonly 
nailed the wrum menu. The mean-, in ilceesS this menu Ls provided i n 
every screen of the software. Phis is accomplished hv repeating the menu 
on each screen by providing a pushbutton that; when clicked, navigates 
to (he menu, or by displayi:ig llu- menu ,l-. an irn'tlJi on the uji rent page. 

If a multimedia software menu's items cunt Ain submenu*. then display 
each submenu on the same screen as the main menu choices. This is 
especially krv when J pushbutton is used to scerss the menu. II ymi 
design, the soft ware s" that sehviing an item from the main menu causes 
a new menu to Ik- displayed on .1 different screen, then you will have to 
provide separate but lorn to access c-ich level id die menu. 3 lie only oilier 
option in this cjise k to change the meaning of the menu button depend¬ 
ing un which screen is currently disp loved. whk h . .i.im tonfusiOil illld is 
1 1 l-vv 1 i'lvoiii me n dc. d. 

WEBSITE NAVIGATION LAYOUT Wuhshr desigpun ji c intin: and more fre 
ipaeiitly adhering to convent urns regarding the positioning of the main 
navigation menus, For example, many website* arrange the main content 
men 11 In 1 nn m I ally Across I he upper JWl of the And the menu items 
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I TIP | 

You can make a complex search 
iuriLUm more understandable if 
you s^1 it up like a sentence. For 
example, let's say you have been 
asked to design a search func¬ 
tion that can look in different 
sections of a site or software 
program for smgle words, combi¬ 
nations of words, or exact phras¬ 
es Users must alsn ha able tn 
exclude certain words or phras¬ 
es Irom consideration. Figure 7=7 
shows how you might set up 
such a complex search, 


I TIP 

One of the best wavs to in cion so 
the usability cl a websrte is to 
posilion the menus consistently 
on each page of the site. Be* 
cause the menus persist this 
gives the effect of bringing gpn- 
lunL tu the user rat bur dun mak¬ 
ing the user "go" to find die con - 
tent, It's like having a pizza deliv¬ 
ered to vbur house instead of 
having to go pick it up. The result 
is that users quickly gain confi¬ 
dence in ft&ir ability to navigate 
the sue. They can't get lost be¬ 
cause they never leave. 
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[TIP | 

Wherisirat pu s s. b le, use e label 
Mi si reflects thy contents uf =hu 
menu, rattier man We generic 
label "Menu" For example, il 
yum me mi contains The name of 
onCiting sites jo a city, than label 
the button that accesses this 
menu, "Places to Vis it. “ 



To help reorient a u$Of who 
returns, to a mam menu screen, 
indicate Which menu the user 
last sb lee Lad This it satily 
accomplished When Ihere are 
submenus—simply display (he 
submenu tor (he last selected 
menu item. 


h hj re 



Inis design pi ovules easy arc ess ra irul- 
iiile cnisgariesi uf ire tih. ,ti is easy it 
uedersidns ,n>d m cleanly lent out. 


fur the currently selected ialc^rr vcrlkully along thtf left side. Such an 
arrangement is called an inverted 1_ Nol( that lor languages that read 
right-io-Left, this convention is ncwrsctl, with a category's menu 
arranged along the right side of ihe page. 

Figure 7-H shows i wdl-dedg.ned navigation system. 


Jiwtidfrect. . 1 — c=i o #“ 0 © ;■ 



ILuia riH ilivr'l hi"'' 

■O m r HDI-iWIKCT I" "i*Mb 

.ri'./t --Ltwl tr 1 JrJ> H WaJTU^b.MI 


Although ihis particular silc is an online grocer, the site’s dear layout and simple structure « 
applicable- to other applications Notice that tin- iitc bandit - lhive levels of cali>gnrii:v ['lit: 
main categories, arranged hiirixuiulK across I he top, are Fruit, Vegetables, Meal, nc. W'e 
selected Se.ilood, ami the site indicates ihis hy changing (he label s color. Directly below the 
main c.itegijiics are Sfstfiwd’ssuhcatBpnrres—pish Fillers. Fish ''leaks.. Whole Fish, and so on 
We selected Fish Fillets, I lieu Fillet of Sole, 

Notice that we can quickly navigate to another type of fish fillel hy selecting ln>m the left, 
choose a dilkrcn! type id wraEnod, Mich as Cbmis Of LdluKt tmill (he iCdfood LUtcgories.. or 
select j diit'cnent major category entirely. It only real grocery stores were lutJ out as cleanly! 

LEFT DR RIGHT SIDE MENUS? interestingly, one recent research siudi suggested. that locating 
menus vertically along the right side of yMge teas mote usable than on the left. The rationale 
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is cli.H the right side nftfie pci^e is also the iowtion of the vert i l ,lL sortillbm. jii oftffl-ttsed ele 
mvtil. .sm |^i.siiilining ihe menu lIum- in j| should K-t|Uirc users in niuvc (tie nmusi: It's. 

j believe there are more arguments jj-jmst orienting menus on tin: right side-A newly cmery- 
uig Kiihtsti is iluL inuny websites have begun using (he right side of the p^e lor short banner 
advertisements. Figure 7-9 shows an LvcpTnple of advertisements oriented down the right side 
(it the slivlti. En reaponse. I have begun lo^iurie mil lhi* purl of the p-ige. El ulhm behave 
simUiirJy, we llligjll mistake menus tor iUlverLisenieriti dnel ignore (hem Lompletdy. 
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Tlltrr is 4 iikmv ichmUI tci iLcmsider j iijs menus jwjy from the rijglil Hide n| the 

Look A [he menu *hown m Hjsurc 7 - 

llie menu is sensible when ihe user's browser j* suftkienth wkIl-. \ nfnriuijjiely, u^ers tin 
run alwav.s mulfflliie their browser windows. E h is can result m this page being displayed as 
-hrwn m h-i^nrc ?-1 Oh. 
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Notice that with the browser window narrowed, the menu is nor visible at all. Specifying it 
fixed width for the p.ipc- l-v.u l-i li.ilt.-s this problem-, but. cwn if the page width .idjusts with the 
width ot the window, parts of the menu tan still Ik cut off for these reasons, I prefer using 
the left side of the page tor vertically oriented menus. 

For the record, hen,' art 1 some points support] ng, both points of view. Some of these points are 
discussed in nesearell performed by James Kalluih and Tim Bospnick. Arguments supporting 
right side- menus include: 

■ Right wdc menus arc closer lo the wroll bar, meaning less mouse movement, 

■ MftSl users are right handed and tend |o move the cursor towards the right when idle. 

■ Some studies of wd]-designed sites show that users can use h%ii h left- and right-oriented 
menus equally well. 

* When priming pages curilainirg right side mentis, if the right part ui the page gels cut off, 
it will be the menu rather than content. 

Arguments supporting left side menus include: 

* Left-side menus arc familial in ii.si.-r> and have become something of a standard. 

* I eft - side menus arc l loser to the Back button, which ts used very often. 

* Left-side menus never gai truncated if the bjmwscr window is narrowed. 

* More and more users have wheel 
mice, which scroll the pug* using 
a wheel. This allows iiseis to 
scroll front anywhere on the 
page, without having to access 
the scroll har, negating some of 
the benefit of Tight-wide ineiHU. 

CASCADING MENUS \* we dis 

cussed in Chapter b ? cascading 
menus can be difficult to u>e. JTie 
menu system shown in Figure 7-11 
is especially Jiff cult fur several rw 
soils. First, because the menu items 
are difipl*ved using a small hint, the 
resulting height of each menu item 
is very low. Tllereft>rt, the u scr musI 
carefully position the mouse on a 
choice, such as Motorcycles, to dis¬ 
play the Motorcycles menu. 
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Using Ihis ...Kliily Ihu-ILI iysUMli U»q<JH«s » prinifion ul 
iUl ki.' mPM@ir.n-l4 b-riMnnrl lfc*i capnlitltiNiS i.! mflny li-sH'S Thn 

imaH y/twft\h :n iHn- left of escti menu iwn frdfis- needless 
clifflnr 
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Tu nuke i Jmkron the Khiinr* ;■ u k- menu, the user mm) wry' prciifcJv mint 11 ihe moUH* CWi 
mh ahm^ ihc MotWtlo dk^Or. p-i.si die triangle jL (he end of eIUj choice, ah J uiiCu the 
Touring choke. Ie ymu rnuu^- nM Acmefit n anything but nearly perfectly hori-amtaK y*su wiJi 
iisphv the wrony menu. Moreover, r( you accidental I* mow off a menu slid onto ihr pagF for 
j friLticm of a second, jEI menus ciL-irpt die* finsE line cLkuipiH'ar and you are l>a< k to square one 

This particular menu, system could be improved vnincwhaL by implementing two changes* 
l : i r^B, iiKHMse the height of each menu choice lu jjuvl" ukis j ljrg.fr target arci, Second, if (hr 
. i Ss. i nili «■ 11 . - HI :^T >Bi . i IlUUI. -,l . | ■ lLl^J-UvimI fef '-\ :J^ I 'lU'!c 11 !«... 11 _ 

it or keep u displayed nnlil the user dicks elsewhere on the p.igc. This will allow a user who 
accidentally moves ilw mouse cursor off ihe menus to dimply move the mouse cursor back 
over the choke*. Although these two suggestions will improve this menu system. i< may stilt 
be difficult tui some u^fi Eu slide the mouse Lursor hortzontilEy to land on the Jinxi nictiu ul 
choices. 

I'igUire 7-1JH shows j Lj^Ladint; menu LluL requires Ftiudti less mouse prccisicHi. 

I liih design ls ea^ieT Lei u>e Iwlju.vj Lhe pathway to ibe second-level menu v* lh,e lull width nf 

the menu. TalbflT than jutf its height. Note ihat (hi? design requires that the top-level menu 
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iknis Ik Id* enough to Iv arranged lioci/ajiLilb without b*. Asllijii'. tl <mIv supports (UO'levd 
menus. Ll .l third-level menu \h required, then it tan be placed on the \\iy-: ih;n is displayed 
when the user selects front the second-level menu. 

Figure 7-5 shows, another type of cascading mem that works well when ih err is just one sub 
menu, but when there Are too many choices to arrange horiionially. This menu design elluii 
n.tles the need for precise cursor movement,. jilJ there is no question which menu the sub- 
nsfn ll belongs to. I he designer iricitsscd the contrast of the submenu by whitening (be hack - 
ground to call attention to it. A bright (.olar was chosen for the selected menu to highlight it, 

A* ne c* dhirtniMi some cascading menu designs are easier to use than others. [u general, 
though avoid the uw atoll cascading ok nut ifpot^bb-1 nslead, use ca Ugoty menus or other 
strategics that don't hide choice, I mm userid. 


Tabs 

'labs can be a very effective means of organizing the content of a website ot mullmvedia soft¬ 
ware program. To maximize the effectiveness of tabs, follow ihew guidelines: 

- I se tubs to organize relates! items at the same peer levd 

♦ Apply (he tab metaphor thoroughly and consistently 

* Confine each group of labs lo one row only 

USE TABS TO ORGANIZE RELATED ITEMS AT THE SAME PEE A LEVEL Firm and foremost, tabs 
jtiu.bC adhere Lo the uitlt Conventions as real-life Laldied folders. This Jin-.sns Ilia I ihe Miin> 
orpized using tabs must be peers or siblings. If the relationship of the dements is parents 
and children Ot some olher hierarchy, then choose dillerenl control. 

For example, you wouldn’t have four tabbed folders in the same file labeled Cars. Hoats, Hnick, 
and Chrysler, flukk and Chrysler are siblings, and Cars and boats are siblings but Ehiick and 
Chrysler are children of (subsidiary toil Care. Slid) a filing system is sure tu Cause confusion. 
It does make sense to have labs labeled Cars, b(uis. 'Imeks. and Virpbncs,or Pontiac. Huick, 
and Oldsirmbilc. 

APPLY THE TAR METAPHOR THOROUGHLY AND CONSISTENTLY If you am going lo use the Mb 

metaphor, then it. This shows clearly that I he information and controls belong In tlw 
selected, lab. figure 7 13 shuw s ,. well cuts tnetl lab >yMcm, Notice that iheselected tah appears 
dearly m iront of the others Abo notice bow the background color of Lite tab label has been 
extended down into the information ;me?3. This makes il dear (h.n ibis informalion Iwlongs 
with the selected tab. 
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A vvfl ■ 'in ayEiflm 

ci*uir i'Ji ch wi nas been Eskite-: 
and A+iiCfi content gee? mhUiat tab. 



Miiii) 1 such is ihe one shown in Figure 7 - M h vitiipJy use gnphici that look like Uh* on 

standard pushbuttons. L"he visual separation caused by the Line bdew ihe buttons spoils [be 
illusion of j tabbed loldeT. Therelnre. (be potential bene lit of usi ng a lab metaphor Inst. 

There arc rniinv examples of poorly designed labs on Lht web. Most of ibe problems arc caused 
by mi-susing the lab metaphor or by inconsistently tmplernmlfcng llie labs, 

Figurr ?-15. ;t ,md b, show* an example of tabs implemented incncuKirntly, 
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Figure 7- |jj shows what look* like n nidhlni^iwd tab nvsicm. Since we 
^ic on the Hdiul' page, the Home lab in djrkcned and is easily disiin- 
guishabJe frwii the other i.ihv The area below rhi-1 Innrie tab the same 
color as the tab. showing diet it* content! are part of Home. Clicking the 
other labs products a similarly satisfactory remit, as cash lab in rum 
apfjearb to jump to the foie from and darkens to match tJw color 
beneath—until wt gL t in- i he- Financial tab. As Figure 7- 1 >b show*, dick’ 
ing the Financial tab display* ;m entirely new set of tribe Tim is dbori 
cfiiing and reduces a user's, confidence in the site. 


7 15a 


TfiiS iQGfc$I ikh.: & well-d^^neil lib sy'-sLhiti. In Fiioslca&es, clicking a lab appears id 
|m iip ii Ed tha hunt ir J Iheri is, htU§ do^tbe ihai \tm ;ifigd h ttit rtfll fcidquvjs w iliac cull 
□■i2king ifi* Fiuncialsib briny:; u\ LJHispiPcinrl r&i|jh. iK.^n^n-i. whinti s* sho^n wi ML? 


| TIP | 

H you are going to use tabs for 
navigation m to organize comen? 
On r. website, make sura that rhe 
metaplinr CBn be appliid con&is 
Itnllly Cci all c! llie tubs. II most ol 
Uie tabs behave properly, but one 
or two behave differently—per¬ 
haps displaying their pages usint; 
a different style--than do not 
display these iistabs. but as but¬ 
tons oi links instead. 
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Whan pioviding a link to another 
webyte. it used to be common 
pract:-::e in display line new site 
Id i . M i) browser wn daw 
f hi ' altuiVL'd III u us-tr Eti viAuV lllti 

new site, then close Ihe window 
iu resume vi-hwi-i p the original 
sue and thus maintain context. 
There ere a couple nf problems 
with this logic First, it assumes 
Unit your site is (he primary site, 
which is often not the case. 
Seed’d, the opening or new 
browser windows may be sup 
pressed by Utility software that 
hinders the display of pop'up 
ads, 



When e link will lake the user to 
o different website, seme usabil¬ 
ity specialists rocommandl 
including the address td the link's 
destination directly beneath the 
link itself. However, since a link 
may hill within the text of a para¬ 
graph. it may not bo acceptable 
10 include an address within this 
text. Instead, considei including 
the address as a tooltip that is 
displayed when (he user roli&the 
mouse cursor over the link 


CONFINE TABS to ONt ROW ONLY we illustrated is rhapter 2, tabs 
only make sense when they can lit in a single row. ']« implement multi¬ 
ple ram of tabs. Ihe selected tab's row must mow down to the ItoeiI -n 
that its CTHlttnt* can tie displayed, 1 "slts ipiickly low confidence in ihe 
control when they cart'l depend oil oi-.ll [,rb mainUming ilk hori/inital 
and vertical posit ion. 


Nypcrtexl and Hyperlinks 

HyjseneKt. a term coined hv led Nelson, is one of the underlying con¬ 
cepts behind the Web itself. Nelson’s original concept for hypertext was 
j mucti nicii' ambitious, two-way Jinking system. Today, hypertext sup¬ 
port* the iuLmJaiiirrLi.il idea that dwtimtnii can be lurk'd or sius'-ret- 
erviuvd lo each other. We h*w exjian-ded the term hypertext to hyper- 
link, which also enctimpasses images used tor the purposes of connect¬ 
ing documents or Other information, 

Ymi i |uk (Mi -i hyperlink to fsplon' ,i particular piece nf information. 
For example. “Thomas leffersou spent many years in Monticcllo. the 
family home he built.' 1 We have learned that clicking on Mon tied Jo is 
going to provide us with more information about Monti eel lo, although 
lliv p,isc.ige dm 1 ,n i iiy give us a clue lo what sort ol additional 

information wt will ht or heai ll >. ■ ■ u I >.l be additional text, a photo- 
graph or drawing, or a vhleu or juJio file. A new Web pugs or jii enLire- 
b new website mat Iw displayed. or we may remain on the current page 
and information: may pop up on this page. 


Breadcrumb Traits 

In the Grimm fairy laic, as Hansel jiuI firewl were being led deep into 
I he forest. Elaiiwl left t trail Lit while pebbles ihal Iu: I ped tbc I-.or Lint 
Jren bter dml t heir way home. When they were led a second iLme into 
the woods, this time with no pebbles, Hansel ined the ^ime lrwk with g 
crumbled piece of bread. The birds ,nc ihe breadcrumbs, foiling the 
plan, but an iiupon,mi navigational aid was born 

A hreadcrumb trail is ,t horizontally oriented list of text links lhal ivp 
resents the path taken through the page.* of a website lo gel m the cur¬ 
rently displayed page. Each text link represents one page visited, and the 
text links are usually separated by a right angle bracket (>), Breadcrumb 
trails lire usually found near 1 be top of the page, although idles w ith suf¬ 
ficient CDHtut tii ncs|uire vertical wralljug sometimes include the bread- 
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BresH-csumn trails 
Si.cii rfi ihis art: can 
hwp isSfri’i tHJciSfW^ 
n&vigaLi: J L IL Mill! 
IDEE; isf Ifcvils Dl hits ■ 
irch'QK 


crumb (rtfiJ at the bottom til' I he page as well, Figujv 7 16 allows j Ly |jj 
c?l breadcrumb trail. 



Breadcrumb trails are moat often used on hierarchical^ organized 
sites—onri that enable users lO drill down TO access in<rf-asmply specif¬ 
ic categories sat levels or information. Tn Figure 7-16, lilt 1 user first 
accessed a l->im.Lury. r|: L ]i vrk-Uvd Aris, ihcu Vjsli.iI Arts, then Photo¬ 
graphy, and finally Digits! Atottfraphy. Unfortunately, they ate also 
sometimes or sires with poor navigation to hely users find their 
Wjy "limvn-." Never lihc a hrradfuimb trail lis a substitute for wll- 
Jcdgned navigation. 

J'hif power of breadcrumb trails is tlnl they allow tin usvi to insiiuitly 
skip in a |Teviotisly accessed level. From the Digital Photography page, 
E could jump directly back to the Directory, Arls, Visual Arts, or Photo¬ 
graphy page Nolc I hit the hrcatlt nnii h li.nl docs not just string along 
the pages the use i tcceswtibut maintains the hierarchy of the pages. Fur 
example, if I clicked rise Visual Arts link, the breadcrumb trail would 
include Directory, Arts, and Visual Arts. The Photography and Digital 
Photographs' items would he removed fru-tll tile list because they arc bli¬ 
ther down the hierarchy than the anrendy displayed page. 

A powerful, although slighth uvptic variation of ilie standard bie-jd- 
cru mb trail is to use drop-down list boxes instead often links for one or 
rnore steps of the trail. Figure 7-17 shows an example of this variation. 


Although l! its last item in a bread¬ 
crumb trail is often bolded or oth¬ 
erwise highlighted to mdsce'e 
thar it IS thfl currently disfllo-yed 
page include a separate title ah 
the page. Don't depend on (he 
highlighted item of the bread¬ 
crumb trail to serve as (he duly 
pane identifier. 


7-17 


ftfi TIWIS" DR 3- Breadcrunt 

11dil toipn : j uves jsera access Id a»s 
EiKJiL-tfs A[ ill d! i! fc^iarcTiy 

Mak" *fl- a Hf-lmcHcmhuh:!, J|I »ivu^ 
ili« nghl of m-o tulBfll^ Ibyc 
lrw;cpHnPi1Cfli:l uflflfl FiHV ha¥& iJifft- 
c utly unKlsrflirMlfcrm itfe? i'-es gn 



tMtttBtY * jWtf 

m\ > VtlaJ* Aria 

*1 

J Ptrtiqrjipy - iMi* - «J 





























158 


Kiyih Lij US J-bla ! I! k 11 j “ I Ll-I I 


ItipJ 

Teat the operation erf the Back 
and Forward buttons from every 
pays of the websites you resign 
and rlfivrilap 10 ensure Ihiit you 
allow visitors to return to previ¬ 
ously viewed pages 


ItipJ 

IIyou are designingsmultiinertia 
software program that reguirns 
Previous and Next buttons 10 
move from screen tq screen of 
content, position these controls 
near the bottom right of each 
screen that requires Them 
Position Hism precisely in the 
same spot front screen to scrnarii 
It allow a user id cl ,:k uiihH: but¬ 
ton repeatedly through screens 
without havmg to adjust the 
mouse position to hnd the button 


Each drop-down list shows all <il llie choices that exist at that level ul the 
hierarchy, This is a definite advantage, since ',oli can truly access virtu¬ 
ally any page from any page til tliu- miIl-. For example, the list that con- 
[jim \ i>u,lI Arts might also include ih<.- uems An I iisutrj Museums- 
Performing Arts, and other Arts topics. Sdoctnig one ni ilw items in a 
drnp-dtrwn ist displays ihni pii^c and delete^ the items to rhe right of 
1 h .li Level ni ihc biL'iidcnimh Ir.iil. The uwr klhcrt It<t in select n choice 
■si th,n level to cum in u L-. 

Keep lwrukruinbtnill)including thedrop-down list vai iathui, in mind 
when you aie csoriaag navigation lor a tile that is organized by levels. 
We will discL di tp-down Lists ami other interface elements in the next 
chapter. 


Back and Forward Buttons 

When users explore hypertext links that display new pages, they rch 00 
ihe blviWM,'rs Rack button In return them to a pretioudv vLsileJ page. 

The use of this but ion is so common, well understood, ami expected, 
that interface designers are including it in more and more !.T)-ROM 
software ifk.u ifuevn'l even uv: 1 a htww-sfr 

Some Web developers program this hut Lou lo redisplay I be Current 
page, trapping tin uht. Although this trick may keep visitant91 your site 
a Little longer Lluii liter wo.ilJ L>e inclined to aliy.cluncei j re lltev mchl'i 
knowingly return to vour die. 

Li you um: ills 1 Back Inn ion to dispkn previous!* visited pages you use 
the Forward burton to step through pages to return to the original page 
von were viewing when you first clicked the Back button. The operation 
of these burtons rfi more complex than their labels indkale. Move 
u round enough ihrough el i fin cm pjgvi jnd site*. and users cm begin to 
confuse the basic concepts of back ami forward using these buttons. 

tort of the problem items from the fad that the Forward button on 
most browsers includev ,i right.-arrow icon. This is the simc symbol that 
iislts l IiI k in ntiUiy -ipplivalimiv in proceed Lo tlie iicvl. as yel unviewed 
screen III u htaWfer, the Forward button never display a page you 
haven't ahead* visited, but "walks you Kick' toward ih<- page 1 rli.it was. 
displayed when you clicked ihv Back button. 

Tin mosl current browsers, the Ikick ami Forward buttons also include 
■i %m,ili iiirnw button that contains i sequential list of llu- pages vtni'vr 
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Viiri il l sing liiifeature km uiie.s ilut VWh developers he spec if), in iMining the va i'io us. pages 
i>i a website, Sometime^ ifciL" Kick or Forward Ia^is contain two or more entries in a row with 
exactly ih( name, eve it tltough they represent different pages. This make* it difficult for 
user* tn select the specific page they want to revisit. 


Site Maps, 

A site map is a set of links tha t describe* 
-i large, complex website's ,ixchi Lecture. 
A site map presents the organization of 
the silt? and allows users to directly 
access rea rly any page id the site. 
Although. minv users don't kr.ms iliac 
site m-aps, exist roi many sites, others 
use them as th? primary means of ruv- 
igaling a site, Isitc map* are needed 
when the Structure of the site is iml e-is- 
iI■. understood u^ing, the site’s, primary 
navigation. 

’lo he successful, a site map inner lie laid 
mil simply and clearly. It should nnl 
iLipiiii any special interface other than 
simple links. Jl is beil il die die map is 
confined to the equivalent of one or 
twn p.ige, rather than requiring the 

Use I li) SLOllI thl'LlUgh ;' .1 L|L" .L-Il'J pjgeclt 

links. II the sue you are designing is 
large or complex enough In warrant a 
site map, consider providing links to it 
throughout the pages of the site. 

Kiri l-i illy; n uir websites hive begun 
formatting their Site maps as alphabetic 
indexes, similar tn I host Louild in the 
Kick of .1 In ink Figurt 7 Ik shows an 
example of an indexed site map. 

Organising the site map as an index 
maj proside emelknc ^eess to the 
site’s content, hut ii may require con- 
.skdcfahle effort to create ihc index mild 
keep it cur lei 1 1 as I hr site is updated. 


Site Map 
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An -mlexed sits iraji may be unpracbca!! lo maintain lor sites whose content 
changes fi h a aamly 


















lit) 



Image Mage 


An iim.l^l- mj| i i\ a guplhk 1 1l■ l e h*ita number of aiclivc litKii* 
that the usei cm clkk individually. c»l Ehi^i^ -iirea^ 
caw be p-n^ramined \o link to a separate pa&e, display \nUn- 
malinn h nr |>l.iy an iiuilin <>r video file or aniniatLcin. Figure 7- 
19 J-iows in tmapk of Of) iriiajr map Llial i£ Hlerally u map. 


Llvsi itrijigtJ tttapi Ep dlt 1 ir l h ifirrjilldrly ihapb-d hudi 
lh.ll talk iru| jfu aCMilt Such -fc$ ; iyi :| .i l*w 
iliflAJ 
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JIPrl-Dl 4 JuvEmlia 


lUUh Eriil 


To dUirnguLsIt jii imja.L' mjp fnnu j plain ^nphk. I Hie cilr- 
■ II should l ! i a '.jjy w\nn tf "A-.: uvei Lhe in Lip. I: r esp€ 
s !■ U . I r i i|.|! !i|.. n li- lo make I he partof 

the image under the mouse cursor vtand out fr^m the res( of 
the image. This give* users positive feedback that ihti ii the 
pail of the ij i:,i g> ihai will lie suloCk’d il they click, Sum? 
iil» add tooltips lo each section of an ijna^ map to gjw 
further in formal ion 


Specialized Navigation 

Mull inn-dii sul'l* .Lie nt'lL-rl leq.iii 1 -. |n. i.Mi/-J il.r. i; .. >«• li.iildle flOUteM «P<CifK Iti.L 

tion*. Ptfijfim moil iinilmuml the audience requirements in such situations and design 
navigation that satisfies these needs, for example, educational sottwjje and computer-based 
training program' often provide tests or quizzes containing multiple-choice or short-answer 
questions. This requires a navi (tat ion system that allows users to; 

T v|r*vy from the current question to the next question 
* Move Lo the previous. question 

■ Tell .u a glance which questions were skipped 

■ Navigate directly to j skipped question or Jir. til her question 

figure ?-2o shows a proposed ndsigaiionjl control for a series of multiple-choice questions 
that attempts to satisfy the above requirements, 

] lie question. 1 ! are displayed one question per screen. The navigation control consists ol a left 
■tnJ rich 1 arrow for moving m (tie previous and next question. BetwtOI these arrow JsOtih is a, 
-erics of numbers, wslh each number corresponding m a qucsiinn The user can click the left 
or right arrow lo Jisj>l ay I he pirvimn or next question, or dick any of the numbers lo direct- 
]y display iht itMdlttd question. T his navigation system allows duecl mapping helween the 
controls ami the associated content. 

I Ire control shown in figure "- ’It also shows, at a glance, winch qiiL'sonns, have hec^ answered 
and which remain unanswered. The unanswered questions are displaced in reverse uliiu- 
luimlwrs on a dark background. This gives the skipp'd question numh'U more visual 
weight,” to call Ihe user's .mention Ui them. 
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A Question of Color 


Although it may not be apparent in the illustration, the designer has arremptetf Co also convey which questions 
■he user answered correctly (green numbuis and mcoriecUy ired numbers^ Moic Hint e usability principle is 
that ccJui should -u« be used by iwitfto eonviy meaning Hus is importunl btLaesu asmaniy as iQ'. uf adults 
have difficulty ditlerenoaiing colors. 

The designer Felt that us ng these colors in the design was acceptable because the software also provides an 
easily accessibly report that indicates which questions have been answered correctly and incorrectly without 
iisng color lor meaning In tha designer's mind, offering color-sighted users the chance to see at e glance which 
questions ware answered correctly and incorrectly outweighed the complexity thal miiFtiple-rtiiDred numbers 
imposed dm ch r design 

Do you agree with die designer? Do you diiirt. that users will be able to easily Figure out the meaning of the green 
and red color? Those who are tempted 10 answer, "It doesn't matter—just explain it in the Help File" might want 
lo racons dcr sud : u ■iis.pnnst' Exce.nl n rare situations, good designers do nbl imjtlire (heic.iu (0 • ■■ rati n Help 
Iile to understand the user miarfatB 

Thmomny he olhiar factors to consider when judging the usability of this design Ftn exarnpli? if th# piOtluCt S 
■mended lor use In countries ouLs.de the United Stales, do all of Ihesi) countries use Ihe convention of rml 
tor met) nect that is familiar irl. die United Stales? Conducting usability tests using Hih target audience is die only 
true way to determine the l-tely success or failure ot tins and elf designs. 
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Wizard* 

A wizard is un interactive aid that |».iiide* ,L user through ihe a unpk’t inn o| .1 cumplcx task, 
such installing wilt warn!, creating a )H» «i document,, or CDIlfi^iriJlg ff tl ttB 

options. rbe wizard presents the si of 1 he task «M .1: .1 ime, and the user must complete 
L-fli.h step siKoesslulk' before moving on to the next step. 

Wizards generally confine the iter's navigation 10 returning to the previous step or advancing 
to the nest step. This lockstep approach emphasizes ease of understanding over speed, whk"h 
may frustrate advanced users. Same wizards provide athlilismai runic-Hion fcatlireS to allow 
users la display any step in Lite process, an improvement. figure 7- 2 1 shows SJch a wizard, 
which Allows Microsoft Word users to create resumes. 

Most designers prefer to limit their use trf wizards to complex tasks that users access mfre- 
quendjr. 
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Don’t la your creative tendencies overcome yout cum men sene. As always, lei users try your 
design ;it an early slagr, anti tib^nf their ran.I ion. 

As we’ve seer, navigation i? one Of the most important cnmjvmrnl*i of a usable website or 
software program E ike other facets of software design, the navigation you design most antic¬ 
ipate the needs of tliv audience n* it niccls the funclkutal objective of the site nr software. 
Crealne approaches 10 navigation are welcome provided they are fit for thrir intended; pur¬ 
pose and meet the ha^li sunilard of usability. 



Whan designing navigation, re member these few sinple rules: 

* Make rt easy for use rs to figure nut whe re they a re 

* Make it dear wftat the options are and how to sated them. 

* Del vCr th & content y t; u pr umi a e whan III u use r m afces a sel action— cl on t promise one thing and 
deliver another. 

* .Always provide an easy main* fur users to charge their mind. 

* Try to anticipate And follow ynur Hiidiemcfi s mania| model thoif concept of how the site 01 soft- 
wait Is organized based on their exponents ui reel-liie situations or similar software. 


* Teel the navigation nn real users. 
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* Teel the navigation nn real users. 
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in review 


- How tan different navigational metaphors: attect the navigational design 1 ? 
WhaT are the three components of navigation 1, 

Vi-iai are two reasons For not poshroning a cotayusy menu down the light side 
d a Web page? 

Venat are two things Ithai are wong with horizontally oriented cascading 
menus and how can you improve mem V 

How con you mpcave the usability of a complex ^rmrcSi by formatting 1 
What types of websites ere most likely to bane Tit from breadcrumb bade? 
Name one advantage mid one disadvantage of an indexed sue map 


exercise 


For the fallowng groups of items, specify whether a tab control would be 
appropriate ter organizing the items to each group; 

■ Clothing. Sporting Goods, Hardware, Cosmetics, School Supplies 

* Bj&eball, Foeth idl, Bes truth nil. Mockery, Sue cur, Standings, Playei Statistics 

* Cars,Trucks, Boats. Airplanes 

■ Ma pies. Firs, Pmes, B ee chos, Wa In uts, Oaks, Aspens, Cedars, 5 pr uces-. Firs, 
Lindens. Syoamorgs. Hickories 
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objectives 

ExjwiiNt n iinriber of dcaign challenge* 
Annlvre possible sohiiiflns to OAOh dtalhtnfln 


Compare advantages and I is es ol tfarluus IppiaicheS la each ctiaJkng# 

EvalutSta oath design solulrmr lo determine how well ilsuits i(« iidmnlsiJ purpose 


introduction 

Each new interface * (■ ■■ r; ■' project pr e-senu ils Own unique set of ch alien ges and n«pp-nr1undi pe Fven 
seemingly simple late otter hidden ccrnipieErry end opportunity far innovative problem string. No 


m-ntlor hew Talenled or espariftnoed the do si-go or. there is always senu naw Ins son to bo le.mma 


NflAimKy, we cant anticipate ail the types of ntertact design problems that you may be tailed 
upo-n losoha. Instead, in this chaplarwa will present savoial design challenges. For ouch challenge, 
woe will work tfirnugh the pnanass nl designmg 5 a solution We hi II record cusr tbnughrt pr-gc beebe as 
w# 40. This will help illustrate how designers -propose approaches, sietch them, analyze them, 
rtfirw them, end repeat Ihrs prows as up-pessary tq m'm at a workable Rehrtion The solutian wa 
propose WiJ he just one of many, and you may edme up with more etogam approaches man thfr ones 


Wtt propoEp, 


SOLVING DESIGN PROBLEMS 
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DESIGN CHALLENGE 1: ASSIGN STUDENTS TO CLASS 

Our first challenge is In fanp fO W C ihr LIslbililY tif a dialog that assigns sliidfnli to a Hnme- 
RMBi class. When you look at hgure ii L^ iry IO figure OUl 3mw hi select ^Luilenls fed’ Inclusion 
In Mrs. Pierces homeroom and how io remove itudenis from ihelisi once they are lelected. 

l-irsi, wl- mil dssume that the user intend* io 

assign Students- III Mrs. Pierce'S hu Liie] ocmi and 

that the selection oi Mrs. Pierce's homeroom as 
ihv target class wag made in a previous dialog bo* 
or screen. Were you able Lo figure nut how to 
ojiei.itc i In controls In get the job iloTicr What fun 
die tlesignef done In help you understand how to 
assign student, aiul what ohsidb starnl in the 
way of your understanding:' 

F irst, what did llu- designer do right} The lilies. 
‘"Uhasssgned Students' and "Si miens Assigned to 
Homeroom: Mrs. Pierce do a reason abb good 
job of explaining Ihe reasons tor the two lists. 1 he 
fact ihar the Kt of students assign id to ihe home - 
mom i- initially emph indicates clearly that there 
h-iw not yet hem any assignments made- TIk 
designer arranged the pushbuttons so Dial one is 
under each list. Users are likeii lo mfer from this 
I ha I t he Select bullim applies lu I he List ol urias- 
sigruxl students, and the Deselect burton applies 
to the assigned‘ Students list. 

Well tnIk about the positioning of these two pushbuttons in a moment, but first let's discuss 
tile push button labels. The left pushbutton coni aim Ihe i.iplinn “Sclccl." and ihe right button 
is captioned "TVifleer." Flow well do these two captions represent their functions' Select is 
wkit you do when you cl ick a name i n a Sisl, not what you do lo act on lh .il select ion. Instead., 
the caption should Jescrilie the action that the pu*hlvutl,on initiates—which K to assign stu¬ 
dents. Our ilrsi improvement wjlllw lo ebange the left button caption to Assign. 

likewise, the action that the right pushbutton initiates is to remove ihe selected name from 
the list of SllldentS in Ml's, 1‘i.eru!* Ilotnerioolil. The designer selected the cap Lion Deselect, 
which. L1J0S1 useu associate With removing If LC selected indication (highlight check mark. 
ek.F Iroru a previously Selected item. 

At tii >t, Unassign may seem like a loiter utpiinn choice, hut a quick duck of the uiciioii.il x 
indicates that un assign js not actually a wind. Pc move is the better choice, especially since it 
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TH:s is the ’Teqn ihai we have bean :n imp-nwa See rF 
.ou car. ^ig U 'E 3mt la 201*3110.1 wrUnoirt lead'i'i; 'he eistrucUan 
la:a 
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aauraii'li ncpEih* action that we jjv initiating--removuiga 
ituJent from ihe list. This pushbutton will be displayed in us injttj- 
vated state 11 there are no students assigned to the class. 

Should he consider renaming the Assign pushbutton Add, since n 
makes a better opposite to Remove? This h nni an easy decision, but 
Assign seems to better represent the action that the user is here to 
perform. We IL keep Assign and Remove as out 1 pushbutton caption 1 . 

Figure S-2 shows our progress so far. 

Notice that when you first look at the screen, diene is nothing that 
immediately suggests thal a relationship exists between the two list 
boxes, except that they are displayed side by side. The pushbuttons 
apply Eu the movement of names between the two lists in either direc¬ 
tion. yet their location suggests that their action is confined to the hit 
itself 


I TIP !i 

This caption discussion illus- 
Hates that a design solution is 
often a compromise among many 
conllictmg needs. There are 
points that support a particular 
decision and points that oppose 
it A designer must develop the 
ability to create alternatives, 
then quickly evaluate the advan- 
larj-HS and disadvantages [ft each 
approach to determine which 
one works best tor oHehds the 
I east | 


IVhal it we positi titled tjoth tile .Assign uiJ Ren Hive hu Linns between 
the two lists? 'This night make it clearer that they contra! ifte move- 
mt-nt ofnames from, one list lo an other. Wc amid enhance this sug¬ 
gestion by including small arrow icons that indicate the direction that 
ihu selecled ju.mel.il will move. Figure fi-i shows such act arrangement. 


S*-*cl sUHfcnli mur. ihHiH m fl* lw Ty h ci^p*. m*ci huv, 

\*w Ird uh "-ip • ;1 1 1. rh-ai II ■ Clife Rtfmm L« Tl ■ t* f#ft%P 
fnjTi th* ftst Ck:k 5am r^u hw I'm. - -pE«a fcfcS rm; StartOTi 
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In Figure h-3 we tL"!, i sulL I he ni^ilrU4-l imiih Us reflect the n£w ciptiom. We Jl&o petitioned the 
Assign button slightly closer to tire Ksl of unsigned student -ih j cue- When chre user elects 
j name,. as th L j v move the cursor to the right, the Assign button is the one they will come to 
first, The s.imi" logic to pnshiuning chi: Remove button clo-^er to the list of assigned 

students, Ite testing will Llflernninc whether mir redesign bjs been sucxcs^ful or if further 

IUXMkv Ua (hi? ilrsigli dfC iln-i ^l s%.i rV- 

Tf ifm appliaiiion is delivered on a Windows PC and is noc a brflwstr^aned applfratbiK we 
would probably recommend using j multiple selection li*t bus atriEcad of the extended-S cI^l- 
:k-m list Imv hhowu. 1'lie uheLk boxes inside ^lllK j list box would make it clcjr dul I he user 
could select multiple student*, then dkk die Asdgn bmion once to move them all to the 
‘assigned 11 list. Su^b j control would have to be custom built for the Macintosh environments 
and is not supported In today's browsers unless custom created using an environment ’.ulIi a* 
Shockwave 1 or Flash 


There is another option that wc should consider. We could eliminate the Assign and Remove 
hutrons altogether by enabling users to drag and drop entries between ihe two lists. To add a 
student to Mrs. Pierce's homer^m* you drag a name from the lisl on the left W che one on 
the right. To remove" .1 iludcnt 
from the homeroom, you drag a 

nan,e in ,h * W* iW; dirft:l,nn ' r fl MX - r 

Hijiwre H-4 shows this design,with i" 1 * r< '™ TTl' >W*“ in * 
u pd aied instruction text. r ot ww i***d mining 

ShKfe^s Aa-H^id !>i 

Dragging and dropping 4 Jot of [£; ££"*"* ui M '« p ^* 

names from one iist r« another ««" s««<r - 

Can become tedious. Enabling E -^yn 

^ CMlItt.Jlmftl 

USCT5 tQ cxlro Their selection to ;*i Y 

... iin F'nilit* Sinn* 

multiple entries, then drag (hem o»» h.,.- 

j 3I at once in ih*' other 1 1 >t is pntb- j!!(twn 

ably t good idea. Keep in mind., J " tB>r ww^in -^ 

h«iwever T Lh.iL some users will not 
kj)o« that selek-Lion lj.ii bu 

extended in this manner. Part of | dwr | 

the user Hating tor this function 
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could include both the Assign/ 
itemewe puHlihnltons and drug- __ 


jiui-drnp method!i of iliLlodiug LlrtU^aeragindidlrDfiinCarfaeabelweaiiaomEi^isiofaftl' 
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DESIGN CHALLENGE 2: ONLINE GLOSSARY 

You have been hired to redesign a Rosary of medical terms for a consumer-oriented medical 
information site. I he sponsors of the site .ire unhippy with the performance and usability nt 
the present glossary's design- Figure * 5 shows ^rybmrdsof the pnsu nl sin*. 
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i-in i »!-.!• hq Dtpssaiv to-ads nil of trie 
terns. CEtinitiDr s, and Pi n'ntjnr ils qnir: a 
an^ page. Users dick g thumbnail tu 
sec the tarye varans m it* mwge. 


Here arc ihe glossary's specifications: 

■ The glossary inclnd cs about Jt H > terms 

* All ot the terms arc included in fl single scrolling page, 

* The definition lor es^h term is displayed slung wilh ihe term, 

* Over half of the terms nhi> include at least one photograph. A ihumhnail (reduced'tot 
image) is displayed for each photograph a n o cw ttcd with a term in the list, nicking a 
thumb nail displays the full-sized version of the image in Uh own browser window. Terms 
may include up to three images. 

The problems yuur client is experiencing and their goats tin the site include; 

1. Users must wait an estrcmcly long tiitlc for Ihv full page of leftlia, definitions,, and thumb¬ 
nails to toad. Many ot the sites visitors n.si- a dial up sen sc. and ihrsC sisilois esptriciter 
especially long delays watting for the glossary to toad. 

2 , The sites sponsors intend to expand: the total number of glossary terms to 350. 

.V The sponsors are considering adding an audio pronunciation for r,uh term in the glossary 
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!' Ui ; d' .1 |fl ;irii6l^in 


Thc> .l^ked tint tile design tit. 1 JleXlblc eSlOUgll to tCCOmnioJjU L tills Jcature 111 tlw 

tUtUTtf. 

Your 1 1 if ii t suggested lIui. dividing ihe glossary into separate —one page ior each kt- 

ttf—might improve (he load times. They are interfiled in pursuing this approach, 

l>ut thei me ncil suie it iviJ] solve their problem. I'hey want the glossary id I* ease toi users lo 
navigate and lie laM Lowing. lb redesign the glossary so lha.1 if solves the current problems 
and allow: for the expected growth* wv will proceed .is In I low 

t. Anati .a- the site so lhat we understand the cause of its problems, 

I . Propose approaches thal miglil solve the problems, 

V. I '.in.me each possible approach. listing its advantages and disadvantages. 

I Modify or combine approaches lo overcome shortcomings ir suggested approaches 

5. Stkvl live approach Ii.i l .sL-eiiLi lo luve the greatest advantages and least sigiiillL Jiil Jis aC 
vantages 

Analyze the Situation 

In this cast, gel ring tulhe root cause of the problem is relatively easy Remember (hat thegjuv 
sary Lantainsmiuihl >U(J terms, and that user hair of them include thumbnails. Lu.iding all 
[Jut content, including over 150 thumbnail images to a mule page is bound to be slow.ope- 

II. iIK lor dial-up visits. Ihe curitlH design might work wf3l if there were m.inv fewer e ntries, 
but the client expects to increase rather than decrease the number of terms. 

Propose Possible Approaches 

Hoe a re some possible approaches to improve the performa nee a n (I design of 1 he site 

1. Display a list of all terms on a single page with no definitions or photograph*. The user 
click* n term So see its Jell rvil u nss ami any associated thumbnail*. 

2. Display all iif the terms nn a single page with their definitions. If a term hu one nr mure 
aMOCialt-il ilumibnails. ih» Hill display it. but provide a link to I he thumbnails nr lull 
images. 

3- Spread live term* across multiple pages, organizeJ bv alphabetic chancier. Display each 
term, its definition, ami any asxucialvil thumbnail* 

Examine Each Approach 

Let's examine the kev .ulvan tages and disadvantages of each proposed approach, i bn goal hero 
is lo idnit illy I he best approach. 
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Thu spflPDic-h IuaeIe onl* 
h>!-ns ro ih4i pu^B 
Usflfi dirk ii term tp see 
rtSdtfhnteBn a-irl Thumb¬ 
nails., ■ -nliejk ,t rl' nnKi 
n*il id if re ih* IflRQdr 
inugi 


All Terms on Single Page, link Id DsFirtiEiftn and Image 

This approach is to display a List of all the tonus on j single page with m> Muiltioffi or pihn- 
lugraphs. The user clicks a term i« see its definitions anil any associated thumbnails. Figure If- 
6 shows storyboards for this approach. 

ADVANTAGES Of THIS APPROACH 

1. the site should load more quickly than the present site, suite no content is loaded until (he 
user selects a particular lerm- 

2. All icrms will be accessible from the same page. This means the user will not have to first 
pick an alphabetic thank ter (hi aucew it* ji*»i Mtod terms 

DISADVANTAGES OF THIS APPROACH 

1. Usees cannoi see a term's definition without clicking ii. j potentially serifliii drawback 

2. Users must scroll through a long list of terms t a find the sought-after term. 
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Alt terms w lh Delimlion Single Page. Link in Image 

I n llin jp|Hiydi, wc display all of ihe terms on j si ngle page with (heir ddtnilinns ll ,i Icrnl 

hi-S one OF more Hssocbted thumb iiatlh, lIu not display Ihem, hut provide j Lot lo them. 

figure tt-7 diuws for thii approach. 

ADVANTAGES Of THIS APPROACH 

1. The >ih' '-IniiiU load moit quickly than (he pratnl silt, riice no thumbnail* are being 
loaded except when the lim:j hcIflIs j particular term, Then imlv ihe ilium bn jjIx Ilji (he 
selected term will Ire loaded. 

2 . All icrms and their cteliniiionH will he accessible from the same page, This means rhe user 
will not haw to first pick an alphabetic character to access irs associated terms. 

DISADVANTAGES Of THIS APPROACH 

J. The i.i>er must scroll through a lolot information to lind a particular term and definition, 
j potentially serious shortcoming, 

2, Although nn( losing all the thumbnails Will definiulv diortcTi hud times, loading .ill .^U 
definitions may still cause a debs' for dial-up users. 
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Page far Each Alphabetic Character. Display Content 

]n this Approach, i*e spread (Iw term* across uiulLipk' pages, organ iited by alphabetic charac¬ 
ter Each of them pj^-s contains each itnn ikai begins with the dwaaei; its definition, and 
jny associated thumbnails, Figure B-tf shows the storyboards lor nis approach, 

ADVANTAGES OF THIS APPROACH 

L The site will load more quickly than the present site, since only Lhe terms-, definitions, and 
thumbnail;, I or terms beginning w ith a specilk alphabetic character arc loaded, 

2. This option on readily accommodate future expansion, since the hud imposed l>y adding 
1WW lernis is divided among the various cha racier pagey, 

DISAnVANTAGF OF THIS APPROACH 

I- The user must select a character to see the terms that begin with that character. If this 
approach is c hosen, we may consider adding a term search capability to enable users, in type 
a few characters, then dick Search to navigate to the term that most closely matches the 
typed term. 

The third option, sht)wn in Figure S4, seems to offer I he best combi nation ul reasonable load 
limes, cj.se of use, .nul expandability. Although users mu si dick a cha racier to see the terms 
that start with that dim acter, such a mechanism is va-sib understood. The tie-arch capability 
will likely reduce' the l me il hikes to find a particular li-rin, an added benefit- Figure 8-tJ shows 
a sample wireframe of this approach. 
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Stole that when a pier enter* a search term and elkb rtw Search button, wc hm several 
opttoni. IF there ii ihri ckkI rn.mh iih the gUavsj.vry, we can diipfiiy the p*fe containing I he 
found term and scroll ihe^Lgu so ih,u Uk found term is.it the Lop of the Kirern. IF load lima 
.ire Mill an jhmit.% we coulddhplic juj^l rhe found terns and its ihumbnaih in a separate bMm- 
r u- rnj i-.\ I! t - u^er could ivjtl :\v di : in u. 11 In ■ ukk • :iL.:vih:.i .. L« *._v L!ic .li llp *. ok :i 
of the imape, j I so in a separate window. 

It the term the user enters is not found, we can display a message lo thnit effect. Perhaps bel¬ 
ter vet* '.'.-e can display tlu- containing eniriri chat start --s iih the same character as the 
Kc.urch Icrm, and kltpuII ih *. 1 pit^r m. ■ ch.it ihc term dibplavt \1 -il the Ittp is the one in^-E before 
where I he search term would have appeared if it werr in the glosK.in 11 -ty we will sTiJI display 
a menage in the user th-it I he term entered did 1101 ivialuli dtn mi the glossary. 


DESIGN CHALLENGE 3: CITY RESTAURANT FINDER 

A mi-ilium m.-vJ eitv's Eoui'Mii hufc.ni |u: jskeJ vmi lu tuhuiil ..nik- | -iIi■ n■:■. l- 1. mha-pi 
sireen* Toj j :l-v. aiipliujItDii llit-x w.mt ui deu-k.p. Tlir a.mc|iI SkkiTlj need IHH he graph)- 

uilly remterud, but lief mu# show your ideas clearly and persuasively. Note tiiatihe project 
11 *clf, restaurant names, addresses, and telephone numbers are all fictitious. 


I m pi.i ip-oni lit ihi' application ii fin Jh viaitors to be jbJe lo limi ruNliu nil's meeting n.iri- 
ous criteria during their stay. Ew example, a user should he able to search for informal Italian 
restaurants ilui oiler moderjidy priced tlinncis. The tourism bureau is not sure whether the 




















application should he delivered to hotels via ( D-ROVf or made available 
as a website. Thrvwmld like ymi m help them decide this. 
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Your clients haw ,iUn .isVi'd th,it lhe wifi wane display a map showing the 
Liva t ion i vf i, !. i ,i n im hat meet a user's er i Lena. The m.ip will show the 
location of the resiau ranis a* well at the Iol ttkm of the user's hold. J bit 
will allow uaers to see which restaurants are within walking distance of 
the hotel and which require transportation. The map will he printable 
so visitors tan lake a copy with them. To save paper, users should nol 
have ro prim maps tor each restaurant selected. Instead, I lie m.ip should 
include several of the resta ur<l nt locations. 


You may Find it useful to henin 
your design wort with one of Hie 
most important elementa of ths 
application. It may help (jut yuu 
sorted and keep you focused on 
rhe reason you were hired in the 
first place. 


For the moment wy will postpone ;iny decision about whether to dew I 
i ip I he application for CD ROM or I he Web imlil wc have explored some 
ul the design i.y>u<S further. Here arc ionic imtul thoughts that will 
probable influence the design of ihis Application. 


Beginning at the End: The Map 

Ju this c&fre, a very important dement of the application is what the visitor takes away—the 
printed map showing the Joe At huh oi resiau rants that meet the criteria the visitor specified. 
The map must he printable on one page and clearly show street names, the hold location, and 
the location of L'.icli restaurant. 

Printing the names of the restaurants on the map itself will probably interfere with its read¬ 
ability vine? the restaurant n.imn may obscure street names. Therefore, we may represent 
each rot.iurnnl on the map by a number or letter. Clin a separate legend or key, we'll include, 
for each realaurant, the referente number or Idler ,md the juitnc of thu rcstJurujit. E-orgoud 
measure, mc' ll add the restaurant s telephone number, in case lhe visitor needs to conlact it. 

I his legend may be printed mi the satne page as Lhe map or on a second page to j III ns die map 
to be as large as a full page. 

Our client has specified that the map will include the location of the visitor's hotel, And this 
application will be made available to all of the city's major holds. Somehow we have m 
actummod.ue mere from .my of the hotels served by the Application. We could show the loca¬ 
tion of every hold on the map, but Ibis will make a vnybiwy map! 1 In addition, lhe applica¬ 
tion will gain wider acceptance by liulcl mauagm if ihs- jpplicjlinr is somehow inJiviJujI- 
i^cd lor each hold U serves. In other words, users should fed a*, if their hold is lhe only one 
represented. Figure &-10 shows a rough design of the map tlial includes Llie location of Lhe vis¬ 
itor's hotel and five restaurants that met the selection criteria. figure S-11 shows the legend 
ih,u explains whal each of the symbols on the map rejvrewnts. 
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d|r>|>ljy, Ihf MHItl. 
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The ^pplk.ilwn tvilll need mhvk nwans *>\ knowing from 
v. Iiuh hotel h i} iK'Hiy, run. I here are several ways io 
jLiIurtipl iih this. I fie lid id Litu sde*.l ike rtditie uf llieir 
hold .fell ins ldlEalmn, or the user can *dev1 the hotel cadi 
lime rke applicaJtiofi is run. 


Select the Hefei Pur my I nsl aUt^Ti o i> 

ll this is all* ROM at 1 ] i In., i ltd n, we aiuld ask the person 
iilS-tjllinihe 0]»pkcaiion Id selccl the hold. I he software 
will have hern programmed 1o know the map I■ u\iriotss 
nf cadi lintel ii serves. When the nwtalkf idecti -i hold, 
this info mu non i* Horcd in a Neon ihc delivery systems 
haul Jhk. ] lie ‘oii-.e.ue appliesijyn will louk in j. known 
location lor this Ole to determine which hold n wrm. 
This will present users Inoiii fusing i« enter the name nf 
I he hold each lime Hiey use the app Iv.iti n n. 
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Selecting (he hotel at installation also means that users will not he able to select a difftrtflt 
hotel and 'how its location on the rn.ip. The hold managers may not mind this limitation at 
jJI, since they m>Ly run necessarily be interested in publicizing holds other than their own. 


Ash User to Select the Hotel 

It this is <1 Web application, we can Store the identification of ihi* hold in a cookie, but there 
is no guarantee that the cookie wilt he present beyond this session. Jit faci. iln-ti- k nn guai 
iintL’i: that the HjMem ihat runs the application will eccn hate cookie j enabled. To he iafcj if 
ill is implication is to l)c dclh ered via the VVcb h we will probably ]ieed iy ask each user who runs 
the application to select her hotel from a list. The server that stores the application will include 
the full list of hotels and the coordinates of each hold's location on the map. 


Setting the Maximum Number a) Re&lauranis 

How many restaurants should we allow’ to be plotted on the nupr Since our user is prnbahiy 
only going to vii.it >un restaurant for a given meal, it might he sufficient to just jlhw her to 
select one restaurant for printing, A flowing users to View and print a mdp with several restau¬ 
rants plotted oileis some true advantages, however, namely that the user can compare the 
locations of several restaurants. 

Our illustration showed five restaurants, plus the hotel location. This seems like a reasonable 
Imui, as it prevents die map from becoming too crowded. When we work on. Hie design of the 
.search portion or our application, we will have io lignre oui how to limit the number of 
restaurants plotted if more than five are retrieved. 

We will also have to be careful that the black rectangles rep resenting two or more restaurants, 
or restaurants anil ;i finlel. don't plot on top of each other, making them difficult or impossi¬ 
ble to read. Olie way to avoid this h ro create a test graphic. Although this process is .1 hit 
tedious, it will ensure that none of the restaurant rectangle* and hotel circles will interfere 
With each other. Start with the graph ll of the map, then place rectangles close Io the locations 
of all of the resljLLianii,. Create them on a separate layer so you cju move them around. bLua- 
ciidrs dose Io the local ions of each, hotel. 

Remember that ■-ou Will be drawing lead I mo from the rectangle or circle In the actual loca¬ 
tion of the restaurant or hotel, so be sure to locate each shape dose to, but not directly at, its 
building's local ion. then draw the lead lines lor all of the restaurants and hotels, making sure 
that none cross, other shapes and that none cover street name*. We do this process because we 
can't be sure which five restaurants will ho ndn’lvil lor plotting, Figure A. 12 shows n portion 
of the map with rvctortglo drawn. 
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(his ngruofi (il (he nut map showsTTifi 
•orations cl all »■ (lie 'tfstflur^ni anc hc-iei 
catHltlli. Thtt proyi^hi wi|4l pftJriWW Cifl- 

DuU II l.'lt-SO lucilicj- S Tills .. -il W.IV !(l 

ii'isuri rhar call jirK iHi fitjr plot (in tor ni 
■stCh ss-o+f; nr f.!isr;ir€ slreet names 
unitfitesaanly. 



Although out test m^p in Figure 8-1 2 looks very busy, rcmriftivT dial our users will see only 
six symbols or less- At some [mini before devetopmeni nf the softwair begins, you will need 
lo record the coordinate* of each symbol in relation to the map, w* th^it each can Ik placed 
accurately. The prugrum will place the graphics for the numbers L through 5 in the cenler of 

l.k!. jeClaclgle, U L ii!-.Ii.-■.L ijiJ the lelki il .n the hoLcl cinJo, mikc lln> {flfi>tni-U.. not 

dynamically i.rented. Our huldt will jJwjvi Ik marked with an H. {Let's hope that test users 
don't mistake our hotel H tor the standard Hospital symbol—if su h we'll create a more slyl- 

i?«l H i 

Notice th.it our irwp legend in hgun? 11 does not mdtide walking or driving directions 
from the hotel. Priming such directions for up ro five restaurants may make it difficult for the 
legend to tit on one page li mav idsiicauseodd fonnatiiny. since the wu>.I dined inn* will he 
of varying lengths. Our jj-uiil is lo nuikt? ihu map sufficiently L'lrar chat visitor* will li,ist’ im dif- 
Ikultj urn: ■ .1, h TeM.munC. FVrhjp# m tad UK tbf :\U.\ |pac« OH ik kgend sb tei to 
pjint li coupon oi *pK|jl offer bom IKl j I'L^t.LLiFJiLt^ UvjL are rrprc-H-islc-J on (hr map. 


The Search Function 

Tfee vl-ji lH fuoKtliM i% the heatl of owr AppEicaifotL Il ia here clitic our um will specify wib*t 
1 vpi- df rnlauriRt lll^ are mlmfkdl in filing. The sejir di iimsi be sample Lo use, yet il must 
pw ilJ..- niLtiMiilldjAll Strict l ktfl criteria Lu jJJow ihe um.t lo make j propel diokt. One nnivr- 
1 -1 s 11 p>ml r- :hirt, LI pu&sible,, we should inducSe ihe search results on the wnw screen its 

the search criteria. This wiU enable a user to evaluate the resutti and narrow or widen the 
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search without having lo navigate 
to a different page. Figure 1M3 
shows two approaches to urjuniz 
irig the swrch wd results arcay 

Wewillib need to nuke it dear to 
user* whether the cri-lcria they spec¬ 
if* Me being cQtnhind or treated 
^rpiiiileL^ lor ex a m ple> if we allow 
a user to select both Chinese and 
French cuisine, should we display 
restaurants that serve either 
Chinese nr French cuisine, or 
should we display only resugranu 
Mui oKcr both Chinese and French? 

Ferhaps we should. restrain users 
from selecting more than one item 
in a category. 

] prefer allowing multiple Selections in e.ich category and retrieving rcsl an r.in Is 1 hat meet any 
of the criteria in that category. tn nur example iibo«, we would return restaurants that served 
cither Chinese or French cuisine. We will combine the uilcru in different categories when 
deter mi ning which restaurants to retrieve- Inn aanijile, if wr select both tiliiiKsesind French 
as our cuisine, then select casual dress ami moderate prices, we will display only Chinese and 
French restaurants that allow casual dress and older mrulcrate priced 

In each category users will have the option of selecting “no preference. This will qualify any 
restaurant for retrieval in this category. Of cour^ these will slid he combined with the selec¬ 
tions in other categories to determine which restaurants are retrieved. For example, if we spec - 
ifv Italian cuisine, but select "no preference" in all of the other catrgnrieSi »e will retrieve nil 
of the ltjli,ir] restaur an Lc stored iff t h L- system 

Well work ml laving out the starch criteria tint The I oil owing list nu lodes the items id inlor- 
matinn that our client h,is requeued we include for each restaurant. This list may grow in the 
future* depending on the application's success. 
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h me are Iihd logical ways ta^ra^n* sear:li items anc search remits an the 
same screen tn |JHge. 


inform a titm Store cl lot Each Retain ant 

* Restaurant name 

* Address 

* Telephone number 

- Inscription tcan include Special Lies such as pizza or seafood ax well JSgeneral iitibruialtun | 
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* Gunine (Italian^ Hiincse^J^rtcJ 

* Hours 

* Meals urvd • breakfast, Iwm-h, dinner) 

■ Plrltc range for enfoees 

■ Urey; unit- (informal, hkkei required etc.) 

■ St j n Liard i/r'd restaurant quality rating, if a va ilable 

* Additional info] mat ion 

* Location on a city map 

> L ink to a sample menu. if ,11 .lilahle 
e Uni: to ilie restauram's tiwii website 

■ Optional pfiofo 

Although our database will include 41 of the above items, not every item need he i search 
iieir I id‘- go down the list ml items and try to determine which items we runs! include as 
search items, which would ho nice 10 include, arid which, if any, we can eliminate, Remember 
that tlw purpose of our application is to allow visitors In select restaurants :hat meet certain 
LiilL-ria. The first sl-i of items will Iw those lli.il one mould need 1 lp maL.- an L,n h j 1 1 iilJ lEil .ami. 


Must-Have Search Hems 

■ i. nisiiiL- (dice!; buses or a lisl Imtx itptwnling alll o \ :ht types of OJbine ITp neMTited bvour 
restaurants) 

■ Meals served I check boxes) 

■ thrice range for entrees I check Ixases l 

■ Dress code (check hoses) 

* SlandardLied restaurant qualm rafting, il available l check Itows (NcUe lhal we may want 
to discuss this possible cmitrowsial ilem further, i 

The 110X1 list contains items that il would be useful to include. bach item includes its rallon- 

Lilc lor including il. 

Hue-to-have Seatch Items 

" Restaur,rnt name (lesrl hox ihat will allow visitors 1o search ihc dlt^AK for the ruimeor 
p.ir li.il name of a restavirant ihev mav have heard or seen) 

- Address l text box used foe, say, j visitor who heard of a great restaurant uit hast Siu^mh 
Sin-L-L hut cannot remember its name) 

* I Jewription i tev hnx that enables visitors to enter a word nr phra.se. and ■■oftwitre chat will 
reini’ve restaurants whose description coiltjills lh,U word or phrase'■ 
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Positioning search 
items on (Its leh 
cormimes half ills 
•vsilabls scrssn 
space The 
controls seem 
reasonably well 
laid out 


We’ll start by including our must-have items, then add the nice-to haves if possible. Figure 8- 
14 shows the search items arranged on the left side of the screen. This arrangement calls for 
the list of restaurants meeting the selection criteria to be displayed on the right half of the 
screen. 

Notice in figure 8-14 that "No preference" appears as the first check box option in each cate¬ 
gory. This will enable users with no preference to check the first box and ignore all of the rest 
of the selections in that category. Since we have used checkboxes for selections in nearly all of 
the categories, users can select more than one item in each category. This allows the illogical 
condition where the user sets the “No preference" check box and also sets one or more other 
check boxes in the same category. 

Since eliminating this possibility would require an awkward combination of controls, we will 
allow the condition to exist, but wc w ill follow the rule that if the user sets the "No preference" 
check (mix. we will ignore any other set check box in that category. 

Also notice how the Rating category differs from the others. This is the only category that uses 
radio buttons instead of check boxes. It would have seemed logical to set up this category w ith 
check boxes representing no preference, one star, two stars, three stars, four stars, and five 
stars. 

ITimk of how this category will be used, first of all. are many users going to specifically 
request restaurants rated at only one star? It is doubtful that our client would include restau¬ 
rants of such low quality {unless perhaps forced to by a lodge). Most users will want to sec 
restaurants of good or better quality. I’sing the check box arrangement described, users will 






184 


| v. q jn (if .itii-ji! • | 


almost always have to check more than one box to get the desired results. By including the 
words “or more* alter each set of stars except the maximum, live stars, we allow users to set a 
minimum quality rating without explicitly having to selccl all of the possible choices. The 
radio buttons ensure th.u the user only 'elects one tatings choice in the category. 

figure 8-15 shows a top-bottom arrangement that displays the search area in the top part of 
the screen and restaurants that meet the selected criteria in the bottom part. We include both 
layouts so that we can evaluate which of the two layouts seems to work better, look at both 
layouts and lortn an opinion about which seems to do a better job of ariaugmg the two func¬ 
tions. Be sure to be able to cite examples from the two layouts that support your opinion. Also 
keep in mind that this opinion is preliminary. Wc won t be able to trulv evaluate both lavouls 
until we complete the screens by including the restaurant list. 
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My preference is for the first layout, the one shown in Figure 8 14. It tillers some key advan 

tages over the arrangement shown in Figure 8 15. including the following: 

• The side bv side arrangement shown in Figure 8 14 enables users in quickly scan the cat 
cgorics to find a particular category. 

• I he top-bottom arrangement shown in Figure 8-15 lakes up more screen real estate and 
w ill crowd the list of qualifying restaurants into a space smaller than that used lor the selec¬ 
tion items. 

• The top-bottom arrangement will require an awkwatd display of the list of restaurants that 
meet the selection criteria. The short vertical jrca will force restaurants to be arranged in 
several short columns. 
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Rased on the amount of space required just to list the must have selection criteria, at this 
point I suggest not adding the nice to have criteria from our list. If wc later think of a way to 
simplify the search criteria area, we can consider adding one or more items from this list. Of 
these items, the ability to search lor a particular restaurant's name is probably the most desir¬ 
able item of the nice-to-haves. 


Displaying Restaurants That Match Search Criteria 

Ihe user selects various criteria and clicks the find Restaurants pushbutton to search for 
restaurants that meet those criteria. The application searches the database and displays a list 
of restaurants that qualify. Rut what exactly should we include in the restaurant display? 

As is often the case, there are several possible approaches wc can take. They are: 

1. Display just the names of all of the qualify ing restaurants. The user clicks on a restaurant 
to see its full information. 

2. Display the names of the qualifying restaurants along with limited information, such as its 
address and telephone number and a brief text summary description of the restaurant. The 
user clicks on the restaurant name to see its full information. 

3. Display all of the information for each qualifying restaurant in a long strolling list. 

let's quickly evaluate these approaches. The first option will enable us to display the roost 
i rants without scrolltn dis| he 1 across two pages. Its m i i 

that users who arc unfamiliar with the city (a large part of the target audience, in other 
words), won't have any information other than the restaurant's name to determine whether or 
not they want to explore that restaurant further. 

The second option, displaying the restaurant w ith limited information may be a viable choice. 
Users can sec the written location of the restaurant and read a brief description. If they are 
interested based on the information they read, users can explore the restaurant further bv 
its linked nam< idvantafto 1 ppi b is that some users may not re 
that additional information exists. They may ignore one of the key features of our applica¬ 
tion' the ability to plot restaurants on a map. 

The third option, displaying the full information for each qualifying restaurant, eliminates the 
possibility that users will ignore a particularly useful part of our application It may be daunt 
ing to users, however, to have to read or scan so much information, especially if many rcstau 
rants meet the selection criteria. 

We'll eliminate the first option and begin laying out the screen to see if it gives us a better idea 
whether choice 2 or 3 makes more sense, figure 8- It* shows our first attempt to lay out the 
basic search results area, with each qualifying restaurant's information shown. Notice that wc 
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Out tirsl attempt to Uy uul trie 
search results shows thst there is 
insufficient space to display more 

then three restaurants' 
utloi matron. 



have included test at the top of this area that indicates how many restaurants met the user s, 
search criteria. 

One positive part of the design so far is that users can view their search criteria and the results 
of those criteria on the same screen. This trial layout shows that the entries will definitely need 
to scroll or link to additional pages to show all of the restaurants found. We also need to pro¬ 
vide some means for users to indicate w*hich restaurants they want to plot on the map. 

Remember tlut we decided to limit the number of restaurants that could be plotted on a map 
to five. How will we determine which five restaurants to plot if our search retrieves more than 
five? One possibditv is to choose five restaurants at random. This is not a very satisfying 
method, however, since the user is likely to wonder why these particular restaurants were cho¬ 
sen over the others that were retrieved. Such a decision will hurt the integrity of the application. 

Another possibility is to choose the first five restaurants that are retrieved ITie problem with 
this alternative is that the restaurants may he stored and displayed alphabetically. This means 
that restaurants whose names are near the beginning of the alphabet will get plotted more 
often than their alphalwtically challenged counterparts. 

One equitable, workable volution is to provide the means for users to select as many as five 
retrieved restaurants for plotting. This means that a restaurant's description and supporting 
data will determine whether or not it is selected. Since the restaurants themselves will be 
responsible for contributing their own description copy, this seems like an equitable, non 
arbitrarv solution. We will still have to determine whether we can design this selection feature 
to be easy for users to figure out and use. 









| CHAPTER I | 


167 


Next we tl refine our design We’ll start by adding a scrollbar to the restaurant information 
area and include cheek Isoxcs next to each restaurant name to enable users to indicate which 
restaurants they want to map. Once a user has clicked five check boxes, we will deactivate the 
remaining check boxes if possible. If this is impossible, then we will display a message to a user 
who attempts to select a sixth restaurant. We'll also add a pushbutton at the bottom of the 
screen, below the scrolling list of restaurants, to enable users to uew or print the map con¬ 
taining the restaurants they’ve selected. 

Remember that we want to he sure users realize that more information exists for each restau¬ 
rant that is displayed in the list. Originally, the plan was to make each restaurant name a link 
to the additional information. The instruction tcxl would reinforce this. However, since many 
users won’t read the instructions, wc will add a more explicit link to each restaurant’s infor¬ 
mation. We can include information alsout the mapping feature in the instruction text ahead. 
Figure 8-17 shows our refinements. 
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Rehncnitnl*. such as adding ntc* 
essary scroll bars and additional 
spurt tirtwiMin tha mlaphonti 
number and description further 
reduce the amount of information 
that can be dismayed before 
scrolling There doesn't seem to be 
any way to prevent tfitm 


Note that wc arc still working with wireframes of the design. If wc win this project, wc will try 
to reduce the size of the text areas somewhat to allow room for the graphic treatment. 

Next, we will create a wireframe to show the screen that is displayed when the user clicks the 
find out more link for a restaurant. It is on this screen that the full information for each 
restaurant is shown, f igure 8- \ H shows a possible layout for this information screen. 
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Hv including both a check box to include the displayed restaurant's location on the map and 
a pushbutton to view or print the map, we may be circumventing our client’s request to save 
paper by including multiple selections on a single map. Of course, if the user has selected any 
other restaurants on the restaurant finder screen, these locations will also be plotted. If the 
client obiects, we can remove the View/Print Restaurants Map pushbutton from this screen 
and only include it on the tinder screen. 

A selection nude for this restaurant on cither the tinder screen or the additional information 
screen will be reflected in the other screen. So if we select the check box on the additional 
information screen, it will be displaved accordingly on the tinder screen. 

I here is tust one more screen to show tor this application. It shows the results of clicking the 
View/Print Restaurants Map pushbutton. Remember that wc have to display both the map 
and a legend that shows the meaning of the numbered boxes in the map. figure 8-19 shows a 
possible layout of this screen. 

As we have worked through this design, sou no doubt realized that this assignment required 
a great deal more thought than the first two presented in this chapter As wc progressed 
through the design, you probably thought of a number of enhancements to our restaurant 
finder application. It this were an actual project, we would uulodc the best of these ideas in 
our proposal as optional enhancements to the project. 

Remember that we said that wc would recommend whether this application should Ik delis 
crcd on a CD-ROM to be installed on a PC or Macintosh system or as a Web-based applica¬ 
tion. Based on our design, this application will probably best be deliveied on CD-ROM. Here 
are some valid reasons for this decision: 
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1 *'* , t shows how tho map and its 
legend wil be displayed on scieen 
Although the map shown looks a bit 
Muriy. tint production version 
should be clear enough to read 
easily 


1. It this application is delivered via the Internet, we will have to ensure that users cannot 
access other websites while using this system. We arc not developing this application to give 
hotel visitors free Internet access. Developing the application as a CD-ROM application 
will allow us to OOntltll the environment so that the restaurant tinder is the only applu a 
tion that users can access from this computer. 

2. There is a cost associated with maintaining a connection to the Internet. Since this appli¬ 
cation in its current form does not require this connection for it to «|vrate, we can save the 
cost of the connection by delivering it as a standalone application that is installed on a PC 
or Macintosh. 

3. If, for some reason, the hotel's Internet provider was to have some sort of trouble that 
resulted m the loss of the connection, then the application will he inaccessible. If developed 
as a standalone application, it will always be available as long as the power is on. 

4. When you print from a browser, you are printing the same image you sec on screen. You 
don’t have the same flexibility in formatting the printout as you do in a CD ROM applied 
tion. If we deliver in ( l> ROM. live printout can be formatted differently from the screen 
image. 

Ibcre may be other, equally compelling reasons for developing this application as a CD-ROM 
application. 

I lopcfully, working through solutions to the three design challenges presented in this chapter 
has given you insight into a designer's attempts to minimize user frustrations with the soft 
ware. Experience can help the designer make the right decisions, but, as always, user testing is 
the only ruler that accurately measures success. 




































190 


| solving des go problem* j 


In the next chapter. we will lurn our attention to how the visual nature of our work affects its 
usability. 


SUMMARY OF KEY POINTS 

• Because design solutions are often a compromise among conflicting needs, designers must be 
able to create alternatives, then quickly evaluate the advantages and disadvantages of each 
approach to determine which works best. 

• Whenever possible, position interface elements such as pushbuttons close to the functions 
they control or represent to strongly suggest their relationship. 

• Try designing an application “backwards,' starting from the desired outcome or user's experi¬ 
ence. then putting the screens or pages in place to make that outcome possible 

• Whenever possible, include search results on the same page as the search entena This will 
enable users to easily modify the search criteria rather than having to go back to a different 
page 

• It may be worthwhile to delay decisions about how to deliver an application until more i$ known 
about the appbcation's design. 
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in review 


What purpose does positioning controls such as pushbuttons between two lists 
serve? 

When proposing potential solutions to the slow loading of the glossary in the 
second design challenge, why did we include ideas that didn't seem all that 
workable? 

3 Why did we go to the trouble of creating the test map with all of the restaurants 
and hotel locations shown, even though this map would never be viewed or 
printed’ 

What is the main advantage to displaying both the search items and the results 
of the search on the same screen or page’ 

5 Why didn't we use the same check bon controls m all of the search items? 

6 Why didn’t we leave plenty of room for the graphic treatment of the screen 
when we created the wireframes? 


exercise 


There are 20 students available for assigning to five different classes Using a 
minimum number of controls, design a Web page that allows the user to assign 
these students to any of the five classes. The user can unassign students from 
each class as well as assign them. 









visual considerations 
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objectives 

Describe how gnds can help you organize a site's content 

Examine how the technique ol unfocused attention can help you review a screen or page 

design 

Align screen controls, labels, and other alemants 

Describe what elements to include above and below a Web page's ‘fold" 

Increase (bo rend ability ol text 

Examine how to select graphics tor a website 

introduction 

For the vast maionty of users, websites and multimedia software are pnmanty visual expenences In 
website design, tho goal is to convey your message to visitors as quickly and strongly as possible 
The site or software s wsuai organization predicts the experience users are likely to have When 
information is visually well organized, users quickly gain confidence and are tree to focus on the 
content If users cannot quickly make sense of the visual structure, they soon lose confidence in the 
site or software's ability to provide what they are seeking 

The various parts of the visual puzzle are the colors, fonts, and images that haightan and nnliven the 
user's experience When these elements are carefully thought out and executed, they work togeth¬ 
er to produce a whole that is greater than the sum of its parts The end result is design that strong 
ly supports the goals of the site or software. 
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Use a g<Hl to help ley out mo content on e Web page The 
gnd helps ensure mat tfiei varans elements are amli 
organised and phasing to the eye 



STRUCTURING INFORMATION 

A site or softwares content provides the basis for its 
visual structure. I ike an outline organizes its content, 
arrange the various content areas into a hierarchy that 
reflects the importance of each area to the screen or 
page Without a strong visual organization, a site or 
software looks haphazard, and users must expend sig¬ 
nificant effort to find particular pieces of information. 

Anchoring Visual Elements 

Although the Web is a relatively modern medium, 
designers can learn much about usable visual design 
from book publishers, who have been perfecting this art 
for years. One important technique that publishers use 
is to anchor sisual elements horizontally and vertically 
on the page. 

Think of a Web page or software screen that you are 
about to lay out as a grid rather than as a blank piece of 
paper. This will help you structure the content so that is 
well organized and pleasing to the eye. Some sites, like 
the newspaper site shown in figure 9 1, adhere strictly 
to the grid, even using it as a design element, while oth¬ 
ers more loosely interpret the grid. 

figure 9-2 shows a schematic representation of a Web 
page It highlights the forms and masses that make up 
the page without providing details such as actual text or 
image content. Such a representation is useful in exam 
ining the visual structure of the page. Sec the sidebar to 
learn a technique for seeing websites and screen designs 
in this fashion. 


»i 9 u- ! 9-2 I 

Tto* schematic d<ogfaro of an actual Web page is a useful tool to# 
annlymig the visual organization of the page The shaded blocks 
approstmare the vrtual weight of the various elements of the page 
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Even from the sketchy diagram shown in Figure 9-2, 
it is clear that the Web page it represents is clearly 
and logically composed. Figure 9 3 shows the web 
site that was the source of the representation shown 
in Figure 9-2. Its strong, simple organizational struc¬ 
ture helps visitors understand, at a glance, what con 
tent it contains and what options exist. 
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This is the Web page that the diagiam in Figure 9-2 represents 
Nonce how effectively the p<t$e$ foments are orguntied and 

pfflsented 



^ Look At It This Way... 


There is a method of looking at things that can be of great use to a designer or anyone whose yob it a to evalu¬ 
ate visual designs. The technique goes by a number of different names, including unfocused attention or splat¬ 
ter vision Art students ate often taught this technique to explore paintings or other works of art 

To practice the technique, look at a painting or image 'all at once," without focusing on any one part of it. One 
way to do this is to widen your vision so that you become aware of objects at the limits of your visual field With 
just a little practice, this technique will attune you to the balance and contrast of a composition. Some parts of 
the painting will seem to draw you into them, while others recede 

Unfocused attention is a valuable technique for evaluating the visual organization and graphic dasign of web¬ 
sites and multimedia software. Looking without focusing allows us to concentrate on the composition of the 
screen elements instead of pimping to interpret the content When we look at a website page or multimedia 
screen in this fashion, the text areas soften into masses, and we can evaluate the design based on the forms 
that result This becomes a valuable tool for the designer who wants to improve a website or multimedia soft 
ware's organizational structure. 

For example, you can use it to determine if a design uses areas of bght and dark to focus our attention appro 
pnately Using thrs technique, you may notice that Web pages and software products often focus our attention 
inappropriately. A graphic element with a minor role sometimes commands too much attention, diverting us from 
more important areas of the scieen 

Native Amencans used splatter vision to spot movement in the natural landscape By alternating between splat¬ 
ter vision and focused attention, they could scan large portions of land in search of animals to hunt Splatter 
vision was also useful in locating animal tracks and trails The faraway look that is evident in photographs of 
native Americans is characteristic of splatter vision 
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Sow look .it the ili.igr.im shown in Figure 9-4. 

In this diagram, representing .mother Wrh p.«ge. there is no dear hierarchy or differentiation 
among the various components of the p-ige. The uninterrupted blocks of gray represent large, 
continuous text blocks. Only the right side of tin- page contains headings that visitors can 
skim to determine if thev want to n id further, lb derive the rest of this page's content, vixi 
tors are going to have to do an aw ful lot of reading. 

Figure 9 5 shows most of the Web page that Figure 9 4 diagtams. 

Figure 9 i bears out out predictions about tin- readability of the site. First the good news. The 
menu buttons on the upper left part of the s< recti are readable and their meaning is clear. The 
text on the tight side of the page contains headings that offer dues as to the content. 

The choices below the menu items on the left and the 
major text section down the middle of the page offer 
serious challenges to visitors. The choices on the left 
under the heading “Popular Sections" would luve been 
easier to read if they did not contain the icon. The icon 
is being used as a bullet in this case, but is repeated too 
many times to be an effective attention getter. The icon 
also prevents the text from 1 icing perceived as indented 
below the (reading, causing users to perceive the entire 
area as one large text block. Finally, if the text extends to 
a second hue. it should be formatted as a hanging 
indent—with the second line starting directly below the 
first line of text, and not bdow the icon. 

I he items preceded by the logo are all links, as are the 
bolded words and phrases in the center text section and 
the headings on the right side of the page. One must 
move the mouse cursor over the items to discover this 
fact, however. The page would Ik* improved if the 
designer used a standard underline for linked text. On 
the right side of the page, the CLICK HLRL NOW links 
beneath each text section would lie unnecessary if the 
headings appeared underlined as standard links. 

The page would lie easier to read if there was more white 
space Skipping a line between each item on the left 
would help. So would skipping a line after each bulleted 
point in the center text section. The center section text 
should Iv organized in several categories such as Keep in 
Touch. MchiIht Benefits, and lobbying Efforts. 
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This diagram of another Web page predicts a much 
more chaotic vuaol experience for the user than the 
prewou* example 
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Thfi large Wocks of unin¬ 
terrupted text r\at cha^ac 
tat \tn Hus page wtu fnafco 
d c!iff.»cuf! for usdtsto 
quickly hud a particular 
piece of information 
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Arranging Labels with Controls 

When designing data entry forms, a designer must decide how to align the labels and I he text 
boxes, list boxes, or other elements that they identity, figure 9-6 shows three different alter 
natives to laving out the labels and other elements, liability research supports the bottom 
alternative as the best alignment. 

LEFT-ALIGNING LABELS AND MINIMIZING SPACE BETWEEN LABELS AND TEXT BOXES I he top 

option in figure 9-6 tries to keep the text boxes and drop-down list box as close to the labels 
as possible. The labels are left aligned and the top tour text boxes are right aligned. No attempt 
has been made to align the State drop-down list with the Zip code text box. 

It is relatively easv to sec why this first choice is not the best arrangement ll appears disor 
gam/ed and haphazard. The viewer’s eye cannot quickly make sense of the organization. It is 
clear that the text boxes need to be left aligned to create a more pleasing line. 

RIGHT ALIGNING LABELS AND LEFT ALIGNING TEXT BOXES The middle option in Figure 9-6 
left aligns the labels and right aligns the text boxes. The top four text boxes arc right aligned. 

Some readers may prefer this arrangement since it eliminates the small gaps between the labels 
and live text boxes or drop-down list The ragged left edge of the labels will make it harder for 
users to orient to each new label, however This problem is not severe in this example, but is 
exaggerated when the text labels arc longer. 

LEFT-ALIGNING LABELS AND TEXT BOXES The bottom option in figure 9-h left aligns both the 
IjImtIs and the text boxes. The top four text boxes are right aligned. 

This alternative’s left alignment of both labels and controls creates two pleasing lines. The 
clean line of the labels makes it very easy to qukkh identify each label. The left alignment of 
the text boxes is equally important to help users make quick visual sense of the arrangement. 
Also contributing to this arrangement's clean lines, although to a lesser degree, is the line cre¬ 
ated hv aligning the right edges of the four long text boxes Ibis is the preferred arrangement. 
If the text labels are of widely varying lengths, then wrap the long laMs and left-justify them 
to maintain the clean left edge* 


Arranging Controls for Clarity 

When laving out multiple sets of controls such as radio buttons, it is important to arrange the 
elements in a wav that clcarlv shows which controls arc grouped, figure 9-7 shows two differ¬ 
ent wavs of laying out three sets of three radio buttons. 

The top example in Figure 9 7 shows an arrangement that makes it difficult to determine 
which radio buttons belong to each group. Are the controls grouped horizontally or vertical¬ 
ly? fins layout is contusing because the spacing between each rjdio button is about the same. 
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figuia 


9-6 I 


M*r« ar« thre« ditfarant ways to align labais 
and test boxes The bottom option, with both 
the labels and text boxes left lustitied, s the 
preferred alignment. 
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Notice how minimizing the space between 
the grouped radio buttons gives important 
clues about which choices go together 
Adding titles further dar ties the choices. 
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Without actually reading the choices, there is no clear way to determine which radio buttons 
belong to each group. 

The bottom example in Figure 9-7 shows how the arrangement of the same set of radio but¬ 
tons can be improved The distance between each radio button in a group has been decreased, 
while the distance between each group has been increased. The addition of a label at the top 
of each group further clarifies the relationship among the buttons and groups. 


Above and Below the "Fold 

Newspapers displayed for sale are folded and stacked on the stand. The area above the news 
paper fold is the part that is visible to passersby. Newspaper editors, aware of the need to sell 
their product, arrange the front page such that the most important stories appear above the 
fold. Articles considered of lesser importance are located below the told. 
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The Webs version of the fold is the l*>ttoiu ol’tlxr brow wr window The area that is above thr 
fold is the visible area otthc page—(he |>artth i ithout Having to vertically scroll 

the page. The area below the fold is the remainder of the page that is initially hidden when 
the page i> displayed and must Ik* scrolled into view, figure 9-H shows a sample Web page with 
the areas above and below the fold labeled. 

Place the most important information, including key text, navigation but ions, links, and 
images, in the area above the fold. 'Ibis increases the chances that your audience will see the 
most important content on each page. Your diems will be able to tell you which information 
they consider most important. 


9-8 


The etea sbo.e the *oM nor¬ 
mally contains more imponant 
images. navigation and links 



As Patrick Lynch and 
Sarah Horton point out in 
the excellent IVub Style 
Guide (Yale University Press/ 
1999), the aiea above the 
fold should contain the 
highest priority items, the 
most graphics, and the 
highest density of links 
The area below the fold 
contains lossor priority 
items and fewer graphics, 
and the density of links is 
less critical 
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Note that a Web pace's fold is not quite as absolute as a newspapers. The lold will differ 
depending on each user s screen resolution and the si/.e o! the browser window. ’Ihe top left 
part of a Web page is sometimes considered the most valuable real estate because it is visible 
regardless ol the user’s screen resolution or browser window si/c. Perhaps it is no accident that 
companies usually choose this area lor their logo or identifier. 


Avoid Using the Area Above the Logo 

Wc don’t expect to find muih important intorin.ition above the company logo, line reason 
for this may be that this area ol the page is very close to the browsers toolbar area. 
Fxpct iciiced Web uscis aic accustomed to tuning out this loolhai area unless they need to 
access one ol its functions, such as the Back button. Websites that challenge this convention 
by locating controls near this area risk usabdity problems, l or example, look at the website 
shown in figure 9 9. 

This is a relatively simple, clean page. The white space and photograph draw your eye nicely 
into the page. Above the company logo, however, the choices (Reservations, Schedules, etc.) 
are almost unnoticeahle. I he problem is partly due to their position and partly to their lack 
of a graphical treatment. Making these choices giaphu buttons would improve their visibili 
ty. Moving them below the logo would be even more effective in helping visitors easily locate 
these important controls. 
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Positwtfig controls 
above the logo may 
cause users to over¬ 
look them This may 
have led the design 
ers of this site to cre¬ 
ate undesirable duptu 
cate controls 
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| visual considerations | 


In tact, the Reservations option at the top of the page and the more noticeable Book Travel 
button below display identical pages las does the Book Air option in the Quick l inks list). 
Providing multiple access points to the same function, perhaps necessitated by the obscuritv 
of the top row of options, unnecessarily complicates the page An improvement lo this site 
would he to devise a single set of well-positioned, visible controls. This would simplify the 
displ.iv by reducing the number of elements and eliminate confusion about which of multi 
pie similar options the user should select. 


TYPEFACES AND THE DISPLAY OF TEXT 

Because of its relatively low resolution, a computer monitor cannot display text nearly as well 
as a printed sheet of paper. Reading large quantities of on screen text can be a profoundly tir¬ 
ing experience. Yet the Web makes more and more text content available to us every day. There 
are a number of steps that designers can take to increase the readability of a website or soft¬ 
ware s text. 


Select Readable Typefaces 

Start by selecting a typeface that is easy to read in its intended medium. Newspapers and 
hooks often use a serif typeface such as Times Nov Roman as their primary typeface, as it is 
easily read on paper. Serif typefaces include the tiny lines at the bases and tops of characters 
such as A. 1. and M. Although serif typefaces look good in print, thes are generally less read 
able on a computer screen. The lower resolution tends to blur the serifs' fine detail. Consider 
using them in websites or multimedia software when you expect your audience to print the 
text for reading on paper. 

According to Lynch and Horton, the height of characters such as the lower-case "x" (the x- 
height) and the overall size of the typeface determine the legibility of screen text, l ive sent 
typeface Georgia was designed with an exaggerated x-height and a large overall size when 
compared to other typefaces of the same point size. Unlike Times New Roman. Georgia looks 
great on screen, but appears large and awkward on paper. 

A sans serif typeface—one without serifs, such as the commonh used 
Arial, Helvetica, and Verdana typefaces—is more readable on screen 
than a serif typeface. If your website or software has a lot of text, and 
you expect most of it to Ik read on screen rather than printed, then use 
a sans serif typeface. 

figure 9-10 shows examples of both serif and sans serif typefaces. 

It the typeface you specify is not installed on a user’s system, then you 
must provide it or the browser or software will substitute one of the 


[TIP] 

Websites and sottwaie that 
mclude too many different type¬ 
faces, typeface sizes, and styles 
have an amateurish look Select 
very few typefaces, sizes, and 
styles and use them consistentfy 
throughout the site or software 
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Serif louts 

Sans Serir Fonts 

Times New Romun 

Anal 

Grorgia 

Verdana 

Uookmun Old Style; 

Futuro 

Souvenir 

Lucida 

Courier 

Tahoma 


installed typefaces. Often this substitution yields less than satisfactory 
results Products such as Macromedia Flash and Director allow you to 
include typefaces with your applications, hut tlursc must he downloaded 
with the Flash application, increasing die download time. For this rea 
son, designers often confine their choices to the most common typefaces 
on each platform. Choosing Verdana. Arial, Times New Roman, and 
Georgia are usually safe bets. 


Maximize Contrast between Text and Background 

Text requires contrast for readability. As Figure V-11 shows, text becomes 
more and more unreadable as the contrast between the typeface and the 
background is decreased. 


Th» re*nomfte &•»*«•* pound and 
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btK*gf cajnd lonaa a^aett r*#d«Mi<y 


The rvtobonehip foreground and 

bbcugrauno tonaa aflects readabni* 
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The rfltadtfneti* |>aree#n keeground and 
background toon ifWi t Mdateltt y 
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Some typefaces were designed tor 
legibility on screen, while others are 
more easily lead when printed on 
paper 



A watermark is a faint graphic 
image used as a background for 
other elements such as text 
When using an image as a 
watermark, lighten it enough that 
you can |ust see the image with¬ 
out distracting the user s atten¬ 
tion from its overlaid text. Simply 
lightening a graphic to use it as a 
watermark does not chango its 
file size You can. however, re¬ 
duce the file size by reducing the 
number of colors in the image 
This can enable web designers 
to realize the visual benefits of 
watermark graphics, while keep¬ 
ing file sizes relatively small. 
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Text is most legible vxtien the con¬ 
trast the difference between the 
foreground and background if 
greatest for large amour** of text 
black text on very light backgrounds 
rs recommended 
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| v>sua| considerations | 


Dark text on a light background is easier to read than light text on a dark background. 
Whenever possible, use dark text on ihe lightest shades tor blocks of text such as sentences, 
paragraphs, ami bulleted points. Confine your use of light-colored text on dark backgrounds 
to titles or headings or to bring attention to a particular text segment. 

Figure 9-12 shows the effects of darkening a watermarked image on the readability of the text. 



The »«t 'srruch * »o r vrfw*n r* bo-sgrcwiW 
image's enj^nris is and «contrast n 

decr e a s e d 






W en ovt'taywg “no aver n graphic image reduce the contrast of the image end increase the brightness unM 
Ore unage is just d*sceatable Ttas writ maxeniH tl*e tests iegdiilrtv Photo bv the author 


Use Left Justification for Multiple-Line Text 


The type of justification you choose for blocks of text can signifkantlv affect its readability. 
In general, left iustdv text when it extends beyond a single line. Figure 9-13 shows samples of 
text that has been left justified. center-justified, and right-justified for comparison. 

Notice that it requites effort for vour eye to locate lire beginning of each line of center- and 
right-justified text. It requires much less searching for your eye to find the beginning of each 
left-justified line. This is not to say that multiple-line text should never be right lustified, but 
be aware of the usability cost. 


Figure 9-14. a portion of a Web page, illustiates several problems with text. The designer of 
this page decided to alter the size of the typeface to fit the space. The unintended result is that 
some questions seem more important simple due to the size of text. The size of the question 
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text should be consistent throughout I he 
text of each button is consistent except for 
the one that reads. “Wh.it arc niv ordering 
options?” This text uses two different m/cv 
For some reason, tins is the only button 
without die single-line box, an apparent 
oversight. 

Notice how the center justification ot the 
text makes the questions harder to read and 
breaks each first line unnaturally left-jus¬ 
tifying the text would give it a clean left 
edge and make it more readable These 
options might be better represented as 
luiks instead of rectangular buttons. I he 
background of the buttons alternates 
between light blue and light yellow Phis 
only adds to the visual confusion. A single 
background color would serve the page 
better. Finally, the Products and I’nces and 
the Client Photo Gallery should be given a 
different graphic treatment, since they are 
not questions like the others. 

9-13 

lett-tusitfied test is eeuesi to read 
because lt>c uutr doatn'r hove to search 
for the baginning of tha next line 


Left-justified Text When text extends to 

multiple lines it is 
easiest to read when left 
justified. Center-justified 
and right-justified text 
leave a ragged left 
edge that requires more 
effort to locate the 
bepnntng of each text 
line 

Center-Justified Text When text extends to 

muliple lines, it is 
easiest to read when left 
justified Center-justified 
and right-justified text 
leave a ragged left 
edge that requires more 
effort to locate the 
beginning of each text 
line. 

Right-justified Text When text extends to 

mutipte hnes, it is 
easiest to read when left 
justified Center-justified 
and right-justified text 
leave a ragged left 
edge that requires more 
effort to locate the 
beginning of each text 
line 
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Tfes ureb pap* 
illustrates several 
common tt«t 
(ifofctom* Muttipftt 
lints of ttfit 
should Ot tot* jus 
tifiotf rather than 
contoted. and the 
tost sat should be 
kept consistent 
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| visual considerations | 


Arrange Lists Vertically 

It » generally easier to find a particular item in a list arranged vertically than horizontally. 
Figure 9 15 contains a list of fictitious team names. Try to find the Harrisburg Ramblers in 
each list. 


Bar Hartxx Marwnbat Oakland Brava* Cokjmtou* Staadt Rala^h Blue Lighting Harneburg Rambler* 
Rochester Blazers Eugene Hornets St Thomas Wildfire Hew Bnlain Cougars. Wildwood Wildcats. 
Cheyenne Broncos Provo Coyotes Oklahoma City Sun Dev* Is Scottsdale Cardinals Pnnceton Hawks 
Frankfurt Lions 


Eugana Hornets 
Columbus Steeds 
Nee Britain Cougars 
Scottsdale CarOnais 
Hamsburg Ramttars 
Oakland Braves 
Pnnceton Hawks 
Rochester Blazers 
Cheyenne Broncos 
Oklahoma City Sen Devils 
Provo Coyote* 

Bar Harbor Marimbas 
Frankfifl Lions 
Raleiffi Bkje Lightning 
wadwood VWdcal* 

St Thomas Wildfire 
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It ts easier :o locate an item «i a vertically onemed kst than in one that is horizoirtalh or ented This is especially 
true wften each item can contain moie man one word 


Most people can find the team name faster in the vertically oriented list. The vertical list is 
especially helpful when some or all of the entries in the list contain two or more words. The 
vertical orientation, with one entry per line, helps us by showing us the length of each entry. 
In the horizontal list, we have to do the work of searching for commas to determine where 
each entry ends and the next begins. 

We purposely chose unfamiliar team names to keep you from using anv previous sports 
knowledge to help you locate the target team. We also arranged things so that the Harrisburg 
Ramblers were the fifth entrv in both lists. This was done to make the test as fair as possible, 
since it might take more time to find a term near the end of a list than the beginning. 
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An informal or formal test to determine the speed of finding items in 
horizontal or vertical lists could l»c designed on a computer In each 
trial, the subject would lx* asked to find an entry in a list. The list would 
vary in each trial, as would the search term. Sometimes lire entries in the 
list would be horizontally arranged and sometimes vertically. The com¬ 
puter would keep track of the tune it took the subject to find the search 
term. 1 he computer could compile and compare the time to search for 
items in horizontal versus vertical lists. 


USING GRAPHICS TO SUPPORT USABILITY 

Graphic images offer many important benefits to websites and multi 

media software, including: 

• They help create the mood of the website or software. 

• They help establish an emotional connection with our audience. 

• They add life to websites and software, creating an interesting depar¬ 
ture from text. 

• Thev can motivate users to make a buying decision or explore 
further. 

• They give users important dues about the nature and priorities of a 
website or software program. 

• Thev can provide detailed product views, enabling users to make 
informed decisions about products thev may be considering buying. 


These benefits come at the expense of potentially large file sizes that 
require long load times on narrow-band width systems, for this reason, 
designers must ensure that the site's graphics are chosen carefully and 
truly support the sites goals. Each image selected must carry its own 
weight. 

Images Create a First Impression 

Many home pages include a relatively large image in the prominent 
position below the organizations name. Such an image can Isc very 
effective in attracting the user’s attention. 

figure 9-16 shows the area ulxivc the fold of an automobile museum’s 
home page. 



When selecting or evaluating a 
photograph or image for a web¬ 
site. ask what value it provides to 
the site's visitors. If visitors had 
the choice, would they choose to 
keep or eliminate the image? If 
you believe visitors would elimi¬ 
nate this image, then what type 
of image might they be likely to 
keep? 
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Museum of Automobiles 
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St> ve i it i' :t in ujfs that iw fustic* to th« sutHOct ot your website The photo of ttw museum doei not crest* 

«n •motional connection nntli ilia sit* visitor 


Notice th-st the most prominent image on the page is the long shot of the exterior of the muse¬ 
um itself. How strongly or wealth do sou think this image likely connects with the site's visi¬ 
tors? Does this image deserve Mich a prominent position on the liomcpage* 

If the building itsell were of significant architectural significance—such as the Guggenheim 
Museum in New York—then featuring it prominently might he a good idea. This building, 
although attractive with its fountains and wide expanse of lawn, looks reasonably similar to 
thousands of other commercial structures. Perhaps there are automobiles displayed behind 
tlie glass windows of the entry, but we are too far away to know, 

I he \alue of the museum is mil the building itsell but the collection of vintage automobiles 
that it houses. A professionally shot photograph of part of the exhibit area or a close-up of the 
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fins or other details of a single automobile would likely create a stronger connection with the 
site s audience At present the automobile photos on the page arc given much less prominence. 

While we are looking at this site, perhaps we can make some additional suggestions to 
improve it. The italicized text on the page is difficult to read and would be improved by chang¬ 
ing its style to normal. Tlierc are three different colors used for the text (four if you count vis 
ited links). This should l>c reduced to one or, at most, two colors. The italicized script type¬ 
face that says. “A Non-Profit lax-Exempt Organization” is particularly difficult to read and 
should be changed to a more readable tvpeface. 

Some of the menu options on the left could be combined to reduce the visual clutter of the 
site. Eor example, the last three photo options could he combined into a single Photos item. 

The Director and Board Members could be part of an About Us item. Many of the text links 
next to the auto photos simplv dupli¬ 
cate the menu choices on the left with¬ 
out giving additional information. This 
area could be used to further the goals 
of the organization, such as highlight¬ 
ing the benefits of museum member¬ 
ship. There is currently no easy to find 
link to driving directions or a map of 
the museum. 

The graphic look of the site could be 
enhanced to highlight its subject matter. 

Eor example, the site's graphical ele¬ 
ments could suggest the interior of a 
vintage automobiles dashboard. A tal¬ 
ented graphic artist could strengthen 
the connection between the site’s look 
and its subiea nutter. 

Next, look at Figure 9-17. 

In this example from an interior page of 
a popular theaters website, the image 
chosen is a photo of the actual Ih>x 
office. Although this is a relatively small 
photo, what purpose does it serve? If 
people were having difficulty locating 
the box office once inside the theater, 
perhaps one could make an argument 
for featuring it prominently. To suggest Atttiaug'. tt'.s imayt* it spuH, Imw docs « .« tin nn audita 
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a replacement, w might a 4 what type of image would be useful or motivating to someone 
who had chosen to visit a Box Office link to a maior theater. 

Perhaps showing a crowd of happy, attractise theater attendees on an opening night ssxsuld he 
an effective image. Another option might he to display a photograph depicting a dramatical¬ 
ly visual scene from a production. The idea is to use this important bit of Web page real estate 
to make an important point or create an emotional link with the audience. 

Notice that this theater offers ticket sales through a third party, represented by a link. Selecting 
tins link from the box office page displays the third parts organization's home page. I'scrs 
must then search lor the theater's current productions. Perhaps it vsould be better if clicking 
this link displayed a page that featured ticket sales for just this theater's current productions. 
Visitors could select the desired production to purchase tickets for it. If the theater’s current 
productions were not of interest to the visitor, there could he links to other entertainment 
options as well. 


|< photo shows the oxritmg menu We altered the 
bt'itor version to siir.oiity the menu visually and call 
.ill* i .t .jm to SttocUld monu cNotCd 


9-18 


The graphic stvle of the menu on the left side of this page 
detracts from its readability. Figure 9-18 shows the pres¬ 
ent design on top and a suggested alternative below. 
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The designer of the original page chose to shorten the 
black background of each menu item. This adds a lot of 
unnecessary visual clutter to the page. The redesigned 
version includes this effect only on the selected option, 
giving it emphasis and improving the readability of the 
page. We also increased the space between the menu items 
and the ticket ordering information, thereby making it 
easier to read. 


TO ORDER TICKETS ON-LINE: 




iclfttiniitr 


Some companies understand very well how to use images 




Tickets 


to convev a pi»werful message. Figure 9-19 show’s a choco¬ 
late company's home page. The strong imagery, simple 
layout, and classic k>ok of the page san lead a hungry 
reviewer to overlook the harder-to-process horizontal 
arrangement of the menu items. Of course, not all com- 


TO ORDER TICKETS 



Omups 



ORDER TICKETS panics are lucky enough to have such photogenic prod- 
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Some eomp&roe* arr lucky tnough to have wuuii*y compelling products nod smart nnougM to feetirto tNm 
prominency 


Images for Functional Purposes 

Although images often help ..k i I I p i U | ion ul a site. ihe\ MtO can 
a more functional role. figures 9-2U and 9 21 were captured from very similar website*, llie 
purpose of these sites ts to allow those who arc purchasing ice bucket tickets to see the view 
from anv part of the arena. The application itself is excellent because it uses the power of the 
Web to add real value to the user's experience. It would he difficult, if not impossible, to dupli¬ 
cate this capability in any other medium. 
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I muul considerations | 


Now lets examine the wav the two different sites handle this application. Well focus on how 
each site uses visual information to convey its message, starting with Figure 9-20. 

As we roll the mouse over a section in the diagram, it displays a photograph of the view from 
that section. For this example, we rolled over section 125. The view from section 125 is dis 
pLiycvl in the iippi i right p.i ir' screen We’ll r■ i Iibilnllas’page. 

Next, take a look at Figure 9 21, a similar seat selector for the Grand Rapids Griffins. 

To use this application, we click on a section and its view is shown in a new browser window 
In this example, we've clicked on section 118. Well call this page the Griffins’ page. 

let’s start with the seating section view. The Gorillas’ page has users mouse over a section to 
see the view, while visitors to the Griffins’ site must click the section. The Gorillas’ page will 



9-20 


Tb* Amanllo Gorillas scat locator 
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allow user* to compare view"* more easily, but the Griffins’ page wins because of the size and 
clarity of the view itself. 

A key difference between the two sites’ photographs is certainly the size of the images. 
Although the small size of the Gorillas' images allows them to load very quicklv—fast enough 
to be displayed on mouse roll over- the images arc too small to convey useful information 
about the view. 

Even more important, the Griffins’ photograph shows players on the ice during an actual 
game. This provides the sense of scale that is essential to evaluating the view. The photographs 
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of the Gorillas' arena were taken when the building was emptv of spectators and players. THls 
must have made it very convenient tor the photographer to shoot the images. The result, how* 
oei, is barren and lifeless It fails to communicate the excitement of watching a live, lightning- 
last sporting event. 

Now consider the plight of the Griffins photographer, attempting to photograph the arena 
during a live game. It must have been difficult to dodge the crowds, squeeze into each section, 
wait lor the action, then squeeze off a few shots before moving on to the next section and 
repeating the whole process. The results certainly justify the effort, however. 

I here are a numbet of other observations we can make in evaluating the two sites. While the 
Griffins' page attracts the eye with its use of white space, the GoriUas site is predominantly 
dark, echoing the lifeless ness of the arena images. It feels almost as if we were visiting the site 
during its off hours. 

Neither site does a particularly good 10 b of labeling the atena sections in the diagrams. The 
Gorillas’ site is readable in the top half of the arena, but sections 118 through 128 should be 
labeled normally instead of 
upside-down. The Griffins’ site 
gets the orientation right, hut 
would Ik more effective il the 
sections themselves were num¬ 
bered instead of the ice and sur¬ 
rounding area. This would make 
it more obvious which sections 
the numbers refer to. 

I he Griffins’ site designer was 
most likely concerned about the 
contrast problem that would 
result from overlaying the sec¬ 
tion numbers on the colored sec¬ 
tions. I his could have been over¬ 
come by including a small rec¬ 
tangle of white background 
along with the numbers. The 
white provides the necessary 
contrast for the black numbers, 
as shown in rough form in 
figure 9 -22. 

In reviewing these two sites, il .. . 

r We have redrawn die section numbers on die tower part at die 

was striking how strong a visual ta > oi- dealt, tit 1 1* each sec j > 
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impression the Griffins site made. VN itlun the first lew seconds, the visitor's confidence m the 
site grows. Ihcre is an attention to detail, such as the angling of the corners near the top of the 
page and the expanse of white to suggest an ice rink. The page i< bright and well organized. 

I he ticket pricing information on the Griffins’ site adds significant information directly relat¬ 
ed to the visitor’s purpose —to sec arena seating views and purchase tickets. On a single page, 
visitors can both compare views from different sections and see the difference in pricing 
among the various choices. I Better still if the site could show which sections had seats still 
available for specific upcoming games!) 

I'he Gorillas’ site onl\ shows the seating chart. The pricing information is buried deep in 
another page that includes a smaller, non-interactive version of the seating diagram. Moving 
this information onto the same page as the interactive seating view would encourage ticket 
sales by making the process of selecting seats and purchasing tickets as easy as possible. 


In reviewing the Gorillas site, there was another problem that was revealed. The photos 
appear verv close to the menus labeled Merchandise and In the News. Normally this is not a 
problem, since the photos arc revealed only when the mouse rolls over a section. The HTMI 
doesn’t execute qukklv enough, however, to prevent the photo from remaining on screen if 
the mouse is moved very quickly off a section. 


If you then move the mouse cursor over the Merchandise or In 
the News menus, the menu is displayed in back of the photo, as 
shown in hgure V-23. 

I bis i.v an example of unanticipated events causing things to 
work unexpectedly I’he person who coded this site wasn’t con¬ 
cerned that the photos were displayed on a layer closer to the 
viewer than the menu. It seemed impossible for this condition 
to occur-—if the photo was displayed, then the mouse cursor 
must be positioned over a section and not over a menu. 

The particular behavior that caused the problem, namdy the 
failure of the processing to keep up w ith the user’s mouse move 
ment, may not have occurred on tlsc developers system. This 
emphasizes the need to continually test the code on a variety of 
different systems. 

Usingtln lo w e d it 1 chap. > il. improve 

the readability, usability,and overall appeal of the websites and 
software you design. By combining your creative ideas with 
good visual design techniques, you will ensure the best experi¬ 
ence possible for your audience. In the next chapter, we will dis 
cuss how to write lor the Web and multimedia software. 
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SUMMARY OF KEY POINTS 

• When designing a Web page or software screen, thinking of it as a grid may help you create an 
organizing structure for the content 

• Use the unfocused attention technique to quickly evaluate the balance and contrast of a com¬ 
position and to observe where the user s eye is drawn 

• Place the most important content of a website above the told, where it is easiest to see 

• Enhance the readability of text by choosing fonts designed for screen display and by increas¬ 
ing the contrast between foreground and background. 

• In general, left tustify text that is greater than one line long to increase its readability 

• Vertically oriented lists are easier for users to scan than horizontally oriented lists 

• Choose graphics that add real value to Web pages Avoid using images that merely provide 
decoration, as they are not worth the time rt takes to download them. 
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in review 


What is gained by looking at a screen or page design with unfocused eyes? 

2 What purpose does creating a visual hierarchy serve on a website or in software? 

3 What is the best way to align a page of labels and text entry boxes? Why? 

Name a typeface that was created especially for display on a computer monitor 
rather than for pnntmg on paper What is it about this typeface that lends itself to 
wowing on screen? 

1 Why is center- and nght-justihod toxt more difficult to read than leftjustified text’ 

What are some important goals for a large graphic used on the home page of a 
website? 


exercise 


Find a website that is not well organized and appears visually complex Create a 
schematic diagram of the site like the ones shown in Figures 9-2 and 9-4, using 
blocks of tones to approximate the visual weight of the elements Try to redesign the 
information on the site by reorganizing it, repositioning elements, or other means to 
make it simpler visually Show the "before* and "after* versions of the site to your fel¬ 
low students. 
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objectives 

Analyse how Web visitor* art different from most other type* of reodors 

Examine how the inverted pyramid structure helps users read content efficiently 

Examine how carefully worded titles and headings can help users scan your page's content 

Analyse techniques to reduce the amount of text on your peges 

Describe when and why to add personality to your Web wilting 

Describe how to help keep users from prematurely leaving your silo 

Examine why ambiguity is detnmentel to mstiuctional writing and how to avoid it 

Exnmine the importance of voice, paco and sequence ia instructional writing 

introduction 

Most users of websrtes and multimedia software are goal-driven They have a specific task to 
accomplish and want to complete that task as efficiently as possible Well-structured, well-written 
text is the key to satisfying those users' needs This chapter will give you specific strategies for 
improving the quality of your Web writing 

Usei interlace designers are often calked upon to write mstructionol text In its simplest form, this 
means crafting brief operational instructions for software or websites If you are a skilled writer, you 
may be asked to write detailed training material or Help text tor a multimedia program 01 website. 
We will explore techniques lor wrtlmg vtstruclmnal materials that minvni/e obstacles to learning 

Get ready to improve your writing skills! 
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WRITING FOR THE WEB 

Hand Mimeuflc an advertising brochure, and they can see your complete message in whatev¬ 
er context you choose to present it. Create a television or radio ad. and viewers are likely to see 
or hear it in its entirety. 

Although a website is a powerful means of delivering visitors to you, it doesn't allow you to 
control how each visitor will experience your message. Mans visitors will reach vour site 
through a search engine, which is likclv to drop them somewhere in the middle of your site. 
These visitors will miss any w ritten introduction you mav have provided on a different page 
unless they choose to navigate there. 

To anticipate the many' paths that visitors might take to a page of your website, you must pro¬ 
vide the means for users to quickly orient themselves to the site’s identification and purpose. 
Include the name of the company or organization and the mam navigation controls on every 
page of the site where possible. 

To entice users to spend more of their valuable time at vour site, you must find a way to quick¬ 
ly establish a connection with them. Writing is one way to establish such a connection, but you 
must first know what motivates Web users. Let's explore how a Web user's behavior differs 
from that of other types of readers and how we can use this information to improve our Web 
writing. 


Website Visitors Scan More Than Read 


Because the Web gives us access to so much content about so many topics for such little effort, 
Web users have become information foragers, quick to spot a promising morsel and equally 
quick to turn away if their needs are not immediateb met. How can a writer convince such 
visitors to pause long enough to digest the site’s content? 


T he answer is to communicate your site's messages as clearly, simply, and concisely as possi¬ 
ble. Website visitors are extremely self-oriented. As such, thev are onlv interested in your mes¬ 
sage as it affects them or their goals. To appeal to today’s Web users, follow these guidelines: 


[TIPj 

When writing for the Web, 
assume that each visitor has 
navigated to the current page 
without seeing any other page of 
the site 


• Write concisely using as tew words as possible. 

• Write using an inverted pyramid structure, starting with the most 
important information and following with supporting details. 

• Use page titles and headings to organize the page’s content and help 
direct users to the information thev seek. 

• Use lists and bullets rather than paragraphs when possible to make 
it easy foi users to wan information. 

• Include a meaningful tag line. 
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• I.ct some personality show. 

• Don't call attention to the Web medium. 

• Use links to support your site, not detract from it. 

Each of these* guidelines is explored below. 


Write Concisely 

The simple fact is that many websites arc overloaded with text. Attempting to scan large vol 
umes of information on a variety of different sites can l»e exhausting and frustrating for users. 
Many sites ean he vastly improved simply by eliminating all hut the most essential informa¬ 
tion on each page. 

To write concisely, start In creating an outline before writing the text for each page of a site. 
The outline will ensure that your thoughts are well organized and youi message carefully con 
strutted. It requires far fewer words to connect well-organized thoughts than it does to link 
haphazardly created ones. 

Once your text is written, review it carefully, eliminating all unnecessary words and distilling 
your message as much as possible. Ask someone else to review and edit your text. If at all pos¬ 
sible. use .in experienced editor. They are adept at catching and fixing things that even great 
writers miss. 


Write Using an Inverted Pyramid Structure 

In some forms of writing, the author strings together statements, building toward a conclu 
sion or main idea. This is known as a pyramid structure, since the foundation is lain and the 
supporting structure built row by row until the top (the conclusion or most important idea) 
is reached. 

Writing tor the Web works best when you use an inverted pyramid structure, a term bor 
rowed from jour nalis m. You start by stating the most important idea first, then add support¬ 
ing information beneath in order from most important to least important Visitors w ill know 
by scanning the first sentence whether the information contained in the paragraph is of value 
to them. If the information is not of interest, they can simply skip to the next paragraph, 
those who are interested can c« it Dl I .nhng the paragraph for the supporting details and 
additional information. 

f igure 10 I shows a diagram of the pyramid and inverted pyramid structures. 

Example I uses a pyramid structure, w hich is not recommended for Web writing. Notice how 
the most important information is not revealed until the end of the passage 
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These disqrms luHrate (b* il'ference between n« pyramid ana inverted pyramid wining stye* 



People who are considering buy¬ 
ing products and services on the 
Web appreciate online tools that 
help them compare features 
among different offerings within 
a company's line. Especially 
valuable are tools that show a 
number of products at once and 
highlight the differences among 
those products. To compare 
products or services from differ¬ 
ent companies, visitors are likely 
to look for an obiective source, 
like the epimons.com website or 
a trusted online magazine 


EXAMPLE 1: PYRAMID STRUCTURE Earlier this vear, we at Coulter Design 
successfully completed a project for Allied Power Company. Allied was 
looking for a firm that could redesign their website to make it more 
usable. They had received many complaints from customers who found 
it difficult to find account balances, pay their bills online, and transfer 
service to a new address. Using our proven analysis and design method¬ 
ologies. wc reduced the number of complaints at Allied by 93 percent! 

T sample 2 uses the inverted psrantid structure that is best for writing 
on the Web. The reader gets the most important information first, then 
can read on for supporting information and additional details. 

EXAMPLE 2: INVERTED PYRAMID STRUCTURE RECOMMENDED FOR WEB 
WRITING Coulter Design helped reduce usability complaints at Allied 
Power by 93 percent! Allied s customers were having difficulty finding 
account balances, paying their bills online, and transferring sen ice to a 
new address. Allied asked Coulter IX-sign to redesign their website to 
make it more usable. Wc successfully completed the project earlier this 
year. 

Notice that readers of the pyramid structured text in Example I will 
miss the mam point unless they read to the end of the paragraph. 
Readers of tin* inverted pyramid text in Example 2 only have to read the 
lirsl sentence to get the most important message. 




I CIUPTIt II I 


223 


Write using simple sentence structure, breaking long sentences into 
smaller ones to keep them short. Include just one thought per para¬ 
graph, since visitors who scan the text may skip a paragraph after read¬ 
ing the lead sentence. It another thought is buried within the paragraph, 
the reader is likely to miss it. 

If you injude descriptions of product or service features in your writ¬ 
ing, be sure to include the benefits that each feature offers to the cus¬ 
tomer. Try to avoid using meaningless marketing names, such as'supeT- 
strong I200P material" that mean nothing to the reader. 

Use Page Titles and Headings 


I tip | 

It's okay to create clever titles 
and headings to try to entice vis 
itors to read more Beware of 
including obscure or local refoi 
ences or tricky metaphors, 
though. If the titles or headings 
are too difficult to understand, 
visitors may not take tho time to 
try to figure them out. 


Include a page title that summarizes the 
main purpose of the page. Page titles are 
important for several reasons. Search 
engines use them to help locate pages that 
meet the user's search criteria. The page 
title is what appears in the title bar of the 
browser window and in the Favorites list 
when you store a page in Favorites. You 
should also include the page title in a large, 
prominent font style near the top of the 

Headings are subtitles that introduce the 
various content areas of the page. Use 
headings to introduce each new topic on 
the page. Figure 10-2 shows a good exam¬ 
ple of headings used to introduce new 
topics. 

The headings make it easy to scan the page, 
providing a summary of this page’s con¬ 
tent. Visitors can read just those sections of 
interest or read the entire page. The text 
within each heading is kept brief and to 
the point, so visitors can quickly get the 

facts they need. Sunpln ipar ..nd concm*. thaso heading and me a;i5- :iatn<l -n 

easy to iollow 


what is Shutterfly? 

5Wf*rfly on online p^oto wyic* designed to help yo* ge* 
fiff!K}uolity pnoto from youf dig tat camera dehvemd r »ght tc 
you? door W&H moke if easy to share you' picture* wilh trend* 
ottd family yy diout expert# and kmle of homo p#ir ’or» a* 
nipt lo lit* ifcx* * 

til* liMe*i Iti twell"olctfy to help prints last a lk*elt i 

*fe 4*w Pup OnniaP ArcNve pacer along Puji ;he^ir an and 
aqupnent to ercure that itltr pirt.4re> - I la^t r - t r» .• 
tHC^stve YwiUHcy® 1etf>r*ofc>g# ensures that ai your petutt?) art? 
jdfustwd for c vk>' automat caty 

once you add your pictures to your £f*utierflv account. * ju jt. 
trance them at needed by rwdoang rod aye and crtop^l ir-aget 
YOU C*n eran p*a^snofcje th**- w*m a pn Th* and got 

creative by or* on eng me color, c*engr»g cowc p*ctu»ei to black a»d 
whde, or oddr»g your chom* o* border- on front and r« mek* it 
litr^le to sand tnmc to frmuH and foody or ro r'-Kir© yoi# picture 
pnmt 

Hie mm I result 

Whor does all tbs moon for you? Wore qu»Ty mewe creative » and 
more Aambaty. far tloiri $*k* you ha»w m vy «<sy» to cu»tafi^t 
you' pnnlt v<Hr thrift * I inn* the wav y««i •^nf them f© f*»r. , >u 
donT need to worr, about trip; tc the tec* pheto at: or the expanse 
and hettka of home pooling And •« ^ • .»*$< utto* ei sat«if«< in• 
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Use Lists and Bullets Instead of Paragraphs 

Consider the iwo methods of describing the features and benefits of house paint in Examples 
3 and 4. 

EXAMPLE 3: SkinTight paint is a premium, hassle-free house paint that will give vou yean, of 
excellent coverage for your house’s exterior surfaces. It has been specially formulated to cover 
most surfaces with iust one coat! It is latex based, so cleanup is a snap with just soap and 
water. You won’t need messy turpentine Of dangerous chemicals to clean your rollers and 
brushes. Skin I ight is one of the most durable paints on the market. It resists harsh sunlight 
and all tvpcs of weather It will keep youi house beautiful lor tears to come! 

EXAMPLE 4: SkinTight is the premium, hassle-free house paint! 

• (lovers most surfaces with iust one coat 

• Cleans up with soap and water—no messy turpentine or harmful chemicals 

• Incredibly durable—resists harsh sunlight and rough weather 

• Keeps your house beautiful for years 

Example -I contains nearly the same information as Example 3. vet it uses 5n percent fewer 
words! Using bullet points instead of paragraphs allows readers to access this information 
much more quickly than by reading the text in paragraph form. Since bullet points can be 
sentence fragments rather than complete sentences, we can reduce the number of words while 
conveying the same meaning 

Notice how the language in Example 4 supports the message. The text includes many action 
verbs (covers, cleans, resists) and descriptive adjectives messy', harmful, incredibly, durable, 
harsh, rough, beautiful). This helps readers to conjure mental images of’ the positive aspects 
of the product and the negative aspects of its alternatives. 

The formatting of ihe points also facilitates quick reading and understanding. Each bullet 
point contains just one feature. A blank line separates each bullet point. The formatting 
increases the visibility of the message and makes it easy tor users to scan the list. The consis¬ 
tent way each point is structured makes it clear that here are tour good reasons to buy this 
paint. 

Include a Meaningful Tag line 

A tag line is a brief, one- or two-line statement that summarizes a company or organization, 
lag lines are most appropriate for corporations, small companies, and organizations. Thev 
don’t generally appear on an individual person’s website, lag lines are usually positioned near 
the logo at the top of each page. 
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Follow These Simple Directions 


Example 4 shows how separating paragraph text into a senes of points increases clarity Look at how this same 
technique makes driving directions much easier to follow than writing them in paragraph form Most directions 
are written in paragraph form, like this 

Get on Route 95 South. Take this highway to exit 25, which is the Middiebury Road exit Make a left turn at 
the off ramp Continue on Middiebury Road until you have passed three traffic lights At the third traffic light 
make a left lurn onto Green Avenue Continue on Green Avenue for two streets until you come to a Texaco 
gas station on the left Make a nght turn at this intersection onto Oak Lane Our house is the third house on 
the left. It is a brown house with white shutters 

The driver or a passenger must search through the paragraph multiple times to find the next instruction to fol¬ 
low Ouvers should never read while operating a vehicle, but the formatting of the directions makes the situa¬ 
tion even more dangerous As we did in Example 4, well write the directions one to each line, like this: 

Route 95 South 

Exit 25 IMiddlobury Road) 

At off ramp turn left 

At third traffic light turn left iGreen Avenue) 

At second street (Texaco station on left) turn right lOak Lane) 

Third house on left (brown with white shutters, 114 Oak Lane) 

When the directions are formatted this way, it is much easier to scan the list to find the next direction We 
reduced the total word count by more than half - from 93 words to 42 words. The directions are easy to under¬ 
stand and follow The author of the directions could improve them further by including the approximate distance 
of each step of the directions. 



A tag line serves several important functions: 

• It communicates the site or company’s purpose. 

• It can provide insight into the company’s philosophy and practices. 

• It can evoke confidence and other positive feelings about the website or company among 
its visitors. 

Creating a tag line that captuies the spirit of the website or its company is not an easy task. 
Corporations and other large organizations usually hire outside advertising agencies or other 
consultants to help them develop their tag lines. If you are called upon to help create a tag line 
for a small company or organization, beware that you may find yourself in the middle of heat¬ 
ed debates about the merits of one approach over another. 
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l ook at the tag lines shown in Figure 10-3, and notice how they capture the essence of the 
com|>any or website in just a few wools. 

To create a tag line you must understand a number of things about the client. First, vmi should 
know who the audience is for their products or services. Next, Find out what clearly differen¬ 
tiates the client from its competitors Finally, learn about the underlying philosophy that the 
company may want to convey. Creating a memorable tag line means weaving these consider¬ 
ations together into just a few words that connect with the intended audience. 
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Let Some Personality Show 

As Web writer Nick I'sbornc suggests, Web communication, characterized by millions of peo¬ 
ple chatting with one another dailv, is interactive and conversational. Typical corporation- 
centric writing seems overly pompous and stiffly formal when it is read on the Web. While 
evidence supports the need to connect emotionally with visitors, strong forces within the cor¬ 
poration may fight to keep its voice aloof and impersonal 

Simple techniques, such as substituting the word “wc" for the name of the corporation, help 
to humanize the message. The idea is that people, not corporations, do things like release new 
products and services and speak to customers, l ook at how F.xamplcs 5. t». and 7 show how 
the choice of words can help humanize the message. I sample 5 shows a paragraph w ritten in 
typical corporate language. 

EXAMPLE 5. 

Home Prod nets Corporation is pleased to announce that it is extending its highly successful 
Rebate program through December. HomeProducts will scud a $100 rebate check to anyone 
who purchases a new Power blast 501) system from the compans In December. 
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Example ' makes HomcProducts Corporation sound stiff and distant. let's apply the word 
"sve” in place of the company name to try to humanize the message. 

EXAMPLE S: We are pleased to announce that we are extending our highly successful Rebate 
program through December. VVe will send a $100 rebate check to anyone who purchases a new 
Power Blast 500 system from us by December. 

I he use of the words wc" and us" in Example h makes I iomeProducts sound more like a 
group of people than a facdcss entitv. Let s see if we can humanize the message even further. 

EXAMPLE 7: Thanks so much to all of you who have made our I\»werBlast 500 Rebate pro 
gram so successful! We are extending the rebate offer through December to help even more 
people take advantage of the savings, lust buy a PowerBlast 500 from us before New Year’s Day. 
and we ll be happy to send you a $100 rebate check! If you know someone else who might ben¬ 
efit from this offer. we‘d appreciate your telling them. too. Thanks’ 

Example 7 uses an informal tone to connect with the audience. Rather than imposing its mes¬ 
sage on visitors, it starts by thanking them. Its aim is to make the reader feel like part of a 
community of people with a common interest. 

Your goal is to convey that the people of the company arc friendly, competent, trustworthy, 
flexible, and support be of the customer. To win the visitor’s trust, you must write truthfully 
without making exaggerated or unsubstantiated claims about the products or services the 
company provides. 

'The degree to which you can personalize the written message will vary according to your 
client’s policies and goals. Even small steps, like using "wc instead of the company name, con¬ 
vey a feeling of humanity that will help vou connect with your audience. 


Don't Call Attention to the Web Medium 

In the early days of the Web. writers were very conscious of the tact that 
they were writing for the Web. Web-conscious messages like those in 
Example 8 were commonplace: 

EXAMPLE 8: This website is for fans of the Wilde Oates rock and roll 
hand. 

This page contains a list of authorized Bronco dealers. 

Click this link to order a Spinster 1000. 

You have probably noticed that very few television commercials begin 
bv saying."This television commercial will introduce you to the ..."The 
writers assume you know that you arc watching a television commercial. 



Don't write in a style that is in 
consistent with the organization 
you are representing Attempts 
to make a large corporation 
sound like a surfer dude or hip 
rap artist will be seen as disin¬ 
genuous and laughable Write in 
a style that is true to its owner 
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Similarly, ymi don't find magazine, radio, or newspaper ads or programs identifying them¬ 
selves as such before delivering their message. 

The Web is now mature enough that you can assume its viewers know they arc looking at a 
website or Web page. Simply identify the site or page and vour audience will get live idea. 
Include the 'Wilde Oates” hand's logo on each page of the site to identify it clearly. Where 
appropriate, include a title such as “Authorized Bronco Dealers" to identify a particular page. 

follow a similar strategy for links, although they require a little nsore thought. Start by keep 
mg the following points in mind: 

• Avoid mentioning the woid "link" except when creating a heading for a list of links. 

• Don't say "Click hCK «<» ..." 

• Incorporate the link in the text. 

Try to think of a graceful way to incorporate the link into the text. For example, if you are pro¬ 
viding a link to a list of authorized dealers, you might cay, “Visit one of our authorized Bronco 
dealers ” Tlve underlined text indicates the link, of course. 


M 

Avoid lengthy greetings and 
detailed instructions how to use 
the website or Web page If 
extensive instructions are re¬ 
quired. chances are the site or 
page needs to be redesigned to 
be simpler and more intuitive. 


Perhaps you arc linking to u page containing awards that the company 
has won. You might say, "W'c at Interplay Studios arc proud of the 
industry awards our innovative designs have won.” 

Whenever possible, word your links explicitly to give users clues about 
what is appropriate for them to do on the page. Use directives such as 
l*av vour bills or Find a hotel . Be sure to deliver w hatever it is that your 
links promise. Don't entice users with a clearly worded link, then force 
them to go through other unnecessary pages to actually get to the 
function. 

Figure 10-4 illustrates some of the problems we have discussed so tar. 


Use links lo Support Your Site. Not Oetract from It 

As we've previously stated, links arc one of the Web's most powerful tools. Use them correct 
ly and you provide an enriching experience for your visitors while supporting the goals of 
your site. Include them carelessly, though, and you simply encourage visitors to leave vour site, 
perhaps never to return. 

Consider I'sample 9. which illustrates how links can detract from your site's message: 

EXAMPLE 9: Filled with six pound* of prime Northern goose down , the Blue Cocoon sleeping 
hag is guaranteed to keep you warm down to 40" K On a recent Mount I verest ascent. Skip 
McMurtry and his iJieipa guides found themselves removing lasers of clothing at night to 
keep from overheating. 
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Worksite Benefit Plans, Inc. 
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This page illustrates severe* problems we heve discussed The welcome paragraph it friendly, but poor edmog 
sends the wrong message to visitors 


If the goal of this site is primarily to educate visitors about sleeping bags, ascending Mount 
Everest, and Shcrpas, then perhaps you can justify including so many links in this paragraph. 
If your goal is to sell sleeping hags, though, then the numerous links present obstacles to mak¬ 
ing a sale. I'hey simple provide multiple opportunities for your visitors to leave your site to 
explore the linked topics. The linked pages may provide further interesting links, so it is pos¬ 
sible that your visitor will never return to vour site. 

There is an excellent reason to include the story of Skip and his toasts companions, however. 
Their experience lends credibility to the quality of the sleeping hag. Example 10 shows how 
we can use their experience to help convince the visitor to buy the product: 
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EXAMPLE 1(L Filled with six pounds of prime Northern goose down, the Blue Cocoon sleep¬ 
ing lug is guaranteed to keep you warm down to -10" F. On a recent Mount Everest ascent. 
Skip MeMurtrs and his Sherpa guides found themselves removing layers of clothing at night 
to keep from overheating. Read about Sk ip’s adventure . 

A Mte visitor who wjnts i usti fit. at ion for buying the Blue Cocoon can follow the link to Skip’s 
adventure to gel the details. Positioned at the end of the passage, the link discs not interrupt 

the message's flow. 


now that you're outside... 
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The linked page should be 
written to provide evidence o! 
the sleeping bags value. It 
should include a link to pur¬ 
chase the product so prospec¬ 
tive buyers don't have to 
return to the original page. 

Some designers create a sepa¬ 
rate area to list all of the links 
for a given page. The Links 
area is usually located near the 
bottom of the page. The main 
text of the page is kept free of 
links, which helps focus visi¬ 
tors’ attention on the page 
Figure 10-5 shows a page from 
a site that uses this technique 
to great advantage. 

Tltc page shown was displayed 
when I selected a response to 
the quest ion. “What gets vou 
outside?” I was intrigued by 
one of the choices—extreme 
sleeping—and selected it. 
Notice the effective use of 
humor in the opening para¬ 
graph. Wc all know that there 
is no sport called extreme 
sleeping. If there were, 
though, this might just be the 
bag to help you perform at 
vour peak. 
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Bullet points mav have nude the product description (aster and easier to scan. The writer did 
such a good fob connecting with me in the opening paragraph, though, that I didn't mind 
leading the long text description. Besides, people who aie researching a product (or possible 
purchase seem perfectly willing to read and absorb a large amount of product-specific infor¬ 
mation. 


WRITING FOR INSTRUCTION 

Docs anyone remember this classic "Saturday Night l ive” skit? It's the one where the chief 
operator of a nuclear power plant, on his last day of work before beginning an extended vaca¬ 
tion, gives instructions to the workers who w ill operate the plant in his absence. Smiling at 
them as he heads out the door, he pauses long enough to advise them to “ Remember, you can i 
put too much water in a nuclear reactor!" 

Hie rest of the skit centers on the befuddled crew's anguish as thev grapple with the ambigu¬ 
ous meaning in those parting words. Did he mean “You mustn't put too much water in a 
nuclear reactor? Or did he mean “There's no limit to the amount of water you can put in a 
nuclear reactor,' as in “You can’t get too much of Martha's home cooking”? 

The vacation-bound chief operator knew what he meant, but his unfortunate choice of words 
failed to get that meaning across. When we convene with others, we provide meaning through 
much more than just the words we speak. Our facial expressions, body language, emphasis on 
certain words, and familiarity with one another all help us to interpret one another's meaning 
correctly. But instructional writers have only the words we choose to convey our meaning. For 
this reason, we must be especially careful in the choices we make. 

Unfortunately, uncovering 
dual meanings in what we 
write is not a simple task. 

Like the chief operator, we 
usually know exactly what 
we mean. It never occurs to 
most of us that someone 
might misconstrue our 
meaning until someone 
actually does. 

One way to help eliminate 
the problem is by being 
alert for ambiguous mean¬ 
ings. In some writing disci¬ 
plines, selecting words with 
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ambiguous meanings nuy be acceptable or even desirable in instructional writing it is dead¬ 
ly. Learners are like most people. When they come to an ambiguous word they simply apply 
whatever meaning suits them, assuming that you, the writer, meant it that wav. And all is well 
until Mime conflicting statement makes them realize that none ot what thev have just read or 
learned makes sense. 


Provide Context 

I once asked a colleague to review an instructional document 1 had written, expecting her to 
heap praise on my efforts. Instead, the document was returned to me well endowed with red 
ink My friend had scrawled “How come?” and “So what?” and “Who cares?” after many of the 
statements I had written. 

It may sound silly, hut now when I write, two imaginary trolls sit on my shoulders Every time 
I write an instructional statement the left side troll yells "How come? ’ and the right side troll 
follow's suit with "So what?” 


For example, "Remember to give both the pink and yellow copies to the customer,” ' How 
come?) “This will enable the customer to give the pink copy to the installer, while saving the 
yellow copy for her records." 


Or, “The SupcrBce Digital Assistant is 
equipped with two USB ports." (So 
what?) "This enables you to con¬ 
nect two separate devices, such as 
your digital camera and scanner to 
the SupcrBee at the same time. 

This how come/so what technique can 
make your writing clearer by helping you 
avoid making assumptions about your 
learners. Providing answers to the ques 
tions "How comc > " and “So what?" tells 
learners why the information you are 
giving them is important. It provides 
the proper context within which to 
apply this information. Having the 
proper context gives learners a more 
complete understanding of the 
subject, rather than a narrow- 
view of lust those pieces that affect them directly 
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VOICE. PACE. AND SEQUENCE 

Instructional writers need to pa> special attention to the message carried in the words we 
write. I his is important both for the operational instructions that tell learners how to proceed 
through training materials and for information about the topics themselves. 

The use of voice affects the claritv of the message that our writing conveys Active voice con¬ 
notes directness and strength, characteristics that promote clarity. Insert tab "A” into slot “IV 

Passive voice implies weakness or softness, it invites ambiguity Slot It is used to receive tab 
“A.” 

To illustrate the use of voice, assume that the information presented in Example 11 accompa 
nics a graphic drawing of a Frammis modulator valve. 

EXAMP1E 11: The Frammis modulator valve is opened to drain excess fluid from the reservoir 

In this simple example, the use of passive voice hinders the learner’s ability to understand 
exactly what is being said. Instructions worded in this fashion cause learners to ask questions 
such as, “Is this a picture of the Frammis modulator valve? Do I or the system open it? How- 
do I open it?" 

Because the learner is m»t as familiar with the l >i r tin* writer, he mav not be able to fill in 
the missing pieces. A better way to instruct the learner might lx* to change the wording of the 
statements as shown in Example 12; 

EXAMPLE 12: Ibis is the frammis modulator salve. Open the frammis modulator valve to 
drain excess fluid from the reservoir. To open this valve, push the toggle switch illustrated in 
the drawing to the “Open" position. 

Besides the fact that the instructions are now written in active voice, notice that each sentence 
plays a specific role. 

• The first sentence identities tlie valve—it tells you what to look for. 

• The second sentence tells you under what circumstances or when you would want to 
use it. 

• The third sentence tells vou how to use it. 

1 his whai/whenyhow construction works well in a variety of instructional circumstances. I lie- 
first sentence is kept deliberately short. This contiol of the instruction's pace adds emphasis 
to the statement, possiblv increasing the chances that the learner will later remember that this 
part is the Frammis modulator valve. 
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Also notice that the words Frammis modulatoi valve are repeated in the example. This repe¬ 
tition may help to further strengthen the association in the learners mind between the part 
and its identify ing label. 

The next three examples are less effective in getting their instructional message across than 
Example 12. They represent some of the common problems found in instructional writing. 
Example 13 illustrates a problem with sequence. 

EXAMPLE 13: This is the Frammis modulator valve. Open the Frammis modulator valve bv 
pushing the toggle switch illustrated in the drawing to the "Open” position. This will drain 
excess fluid from the reservoir. 

Notice in Example 13 that the description of what the valve d<nrs appears after the instructions 
that tell how to open it. The learner may not know that he wants to open the valve until after 
he finds out what it «Ws. By then, of course, he must go back and reread the sentence that tells 
him how to open it. 

Example 12 solves this problem by telling tin* learner how to open the valve alter explaining 
wlut the valve does. 

Sequence may assume an even more important role in instructional writing, as Example 14 
illustrates. Imagine that Bob, a novice repairman, is using the instructions in this example to 
drain excess fluid from the reservoir. Approaching the live unit. Boh systematically reads and 
performs each of the follow mg steps before going on to the next instruction. 

EXAMPLE 14: 

1. Remove the four screws from the Frammis modulator valve cover plate. 

2. Remove the cover plate. 

3. Open the Frammis modulator valve by pushing the toggle switch to the “Open” position. 

Caution: Opening the Frammis modulator valve while the main unit is powered up will result 
in a violent explosion. 

This is a somewhat farfetched example, hut most of us can cite examples of instructions we 
have followed that gave us the information we needed just after we needed it. 

Common sense dictates that am cautions or exceptions to some prescribed action need to 
appear More the instruction, ihai tell the learner how to |vtf. .ntion You must 

iv >:m. 'h.it the le.irnot is using the ft 1 | en it tit, 

not its intended or recommended use. 
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Tbc sequence of words within a sentence can also con¬ 
tribute to or detract Irom the learner s level of comfort 
with your training, often in subtle ways. For example, 
consider the method of wording the instruction in 
Example 15. 

EXAMPLE 15 This is the Frammis modulator 
valve. If you wish to drain excess fluid from the 
reservoir, then open this valve by pushing the tog¬ 
gle switch illustrated in the drawing to the “Open" 
position. 


In the second sentence, "II vou wish to drain excess lluid 
from the reservoir, then open...." the learner must read 
twelve words before he can determine if draining excess 
fluid from the reservoir has anything to do with the 
Frammis modulator valve it* which he has just been intro 
duccd. The student is waiting for the word "this" to tie the 
Frammis modulator valve to the description of that valve. 

The wording in Example 12 solves the problem by effective!) 
linking each statement to the preceding one. This linkage is 
accomplished by repeating identifying words such as 
“Frammis modulator valve” and by positioning linkage words 
such as “this” early in the sentence. 



Writing instmction.il materials demands a greater attention to detail than almost any other 
writing form. Because the goal is to improve performance rather than to entertain or inform, 
the clarity of our w riting is of particular importance. 

Bv eliminating ambiguity, providing the context for information, and controlling the voice, 
pace, and sequence of our writing, we can help ensure that our considerable efforts bring the 
highest possible benefit to our audience. 

As we’ve explored in this chapter, writing is an art all to itself. The skilled writer uses infer 
mation about the intended delivery medium, audience, and message to create text that com¬ 
municates clearly and efficiently. In the next chapter, we will turn our attention to designing 
websites and software that arc accessible to people with special needs. 
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SUMMARY OF KEY POINTS 

• Because Web visitors can access interior pages of your site without first seeing your home 
page, you must provide the means for visitors to quickfy understand your site's identification 
and purpose 

• Write using an inverted pyramid structure, starting with the most important information and fol¬ 
lowing with supporting details 

• Use more lists and bullets and fewer paragraphs to make it easy for users to scan information 

• To connect with your visitors, adopt an informal, friendly style that is appropriate to the organ¬ 
isation. Using the word *we* instead of the company name is one way to reduce unnecessary 
formality 

• Use hypertext links to support your message, not to invite visitors to leave your site 

• Active voice, propel sequencing, and pace promote clearer instructional writing 

• Ask yourself "How come?" and "So what?" to improve the quality of your writing 
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in review 


What are three techniques that can make it easv for visitors to scan website con¬ 
tent? 

2 What is the inverted pyramid styte, and why is it recommended for Web writing? 

3 What are two advantages of writing text as bulleted lists over writing in paragraph 
form? 

4 Name one u! the quickest ways to humanue a dry, corporate sounding message 

5 Put the terms How. What, and When in the order recommended for introducing 
procedures. 

6 What two simple questions can improve your wnting? 


exercise 


Using the inverted pyramid writing style, create some persuasive copy designed to 
convince site visitors to buy an actual or fictitious product or service. 









I designing for accessibility I 











objectives 

Examine different types of impairments and discuss how they allect peoples ability to use 

softwaro and websites 

Describe how assistive technologies such as screen readers and refreshable Braille dis 
plays help make websites and software more accessible 

Examine how people with different types of sight impairments see the world 

Examine the two maior accessibility initiatives 

Analyze specific techniques lot assuring compliance with accessibility guidelines 

Describe tools that are available to bolp test and ensure the accessibility of your websites 

and software 

introduction 

When most of us think about designing for accessibility, wo think about creating websites that are 
accessible to people with disabilities Indeed, although tire Web holds nearly limitless promise lor 
the disabled, that promise often goes unfulfilled Many Web designers and developers unknowingly 
make their websites inaccessible to visitors with special needs 

Accessibility also extends beyond those w*1tt disabilities For example, the small display sue of POAs 
and cell phones limits then users' ability to access the Web or software Likewise, a worker may be 
driving a car, working in a noisy environment, or otherwise have their eyes, hands, or ears distract¬ 
ed Designing for accessibility means considering the needs of anyone who is working under sub- 
optimal conditions As it turns out, optxmzmg websites and software tor accessibility to those with 
thsabdrties also mcroases their accessibility to many of todays small and specialized devices 
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DISABILITIES AND ASSISTIVE TECHNOLOGY 

According to the Disability Law Resource Project (http://www.dlrp.org), approximately 20% 
of (he Unites! States population < about 40.8 million people has \on>e form of disability as of 
this writing. An estimates! !<)“•• of the population (about 27.3 million people) has a severe dis¬ 
ability. 

As the baby boom generation of the l*J50s ages the number of Americans with disabilities is 
likely to increase. While it is arguable that everyone, regardless ol disability, deserves the 
opportunity to access the Web and software, the sheer sue of this large and grow ing segment 
ol the population makes an even stronger case for accessibility. 

There are a number of disabilities that can make it difficult to access the Web or multimedia 
software. I'hese impairments include: 

• Vision impairments, such as blindness, low vision, and color blindness 

• Hearing impairments, such as partial or total deafness 

• Mobility or muscle impairments 

• Cognitive impairments 

• Seizure disorders 


Equivalent Alternatives 

Disabilities keep people from accessing certain types of Web or software content. A user mav 
be able to see, but not hear, or hear but not see. Another mav lack both sight and hearing. Still 
others may lack muscle function, preventing them from using a keyboard and mouse. 

Knhanong accessibility for the many different types of disabilities often means providing 
equivalent alternatives This simple means including alternate means of presenting the con¬ 
tent of your site or software, for example, if sour site includes audio or video of a person 
speaking, then you might provide a text transcript of the audio portions to allow a hearing 
impaired person to access the material. 

If your site or software includes animation that cannot be captioned, then provide a text 
description of the animation’s content If you display graphic images that convey information 
rather than lust providing decoration, then provide a text description of the image. 

It vour site or software includes interactions that cannot be made accessible, then provide an 
alternate means of delivering tire same content. 
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Assistive Technologies 

Assistive technologies, such as screen readers, refreshable Braille dis¬ 
plays, screen magnifiers, and voice-recognition software hdp make web¬ 
sites and multimedia software accessible to those with certain types of 
disabilities. Often website designers and developers can make relatively 
minor adjustments to websites and software that will maximize these 
dev ices’ effectiveness or otherwise increase accessibility. 

Let's explore the accessibility issues associated with some common dis¬ 
abilities. 

Vision Problems 

Vision problems range from full blindness to minor difficulty differen¬ 
tiating certain color combinations. In between are many people with 
reduced or low vision, which can range from mild to severe. 

Low Vision 

According to the DLRP. approximately 3.5% of the U.S. population (9.2 
million people) suffer low vision People with low vision range from 
those that are nearly blind to those who retain some of their eyesight 

Figures 11-1 through 11-7 compare normal vision to various types of 
low-vision impairments. These images, from the National Fvr Institute, 
simulate how a particular scene looks to pco|>le with these conditions. 



I TIP | 

It is generally better to create a 
single version of a website or 
multimedia software product that 
has been optimized for access* 
bility than it is to create separate 
accessible and non-accessible 
sites Experience dictates that it 
is difficult to maintain two sepa¬ 
rate products, and the accessi¬ 
ble version will ultimately lag 
behind the non-accessible one 


11*1 

This is how an everyday scene looks to 
a poison with normal vision Nabonal 
Eye Institutu National Instil-itas of 
Health 
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11-2 


This is Now tNt setno looks to w*nii 
one witti tht common condition of 
myopia lnears»ghte<ln*ssl National 
frye Institute National Institutes of 
Health 


11-3 


Hurt i% now tl>t scent might look to 
someone wn*i Glaucoma National Eye 
Institute Naoonal Institutes of Health 


11 -4 


Hatt is how tha scene might look 10 
soinaona with » cataract National Eye 
institute National Institutes o* Health 


11-5 


Hare is how the scant might look to 
someone with diabetic rotmopilhy 
National Eye Institute. National 
Institutes o! Health 
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11-6 


Here it how the scene (night look to 
someone with age-ietoted macular 
degeneration Natural Eye Institute. 
National Institutes ol Health 


11 *7 


H^e is how the seer# might look to 
someone with retinitis pigmentosa 
National Eye institute National 
Institutes of Health 


Assistive technologies for low vision sufferers include both hardware and software devices. 
Hardware devices include specially designed monitors tliat enlarge and increase the contrast 
of the display These are available in color and black and white models. 

More widely used are soli ware-based screen magnifiers that increase the size of what is dis¬ 
played on screen and provide other accessibility functions. Examples are M AGic (by Freedom 
Scientific) and ZoomTcxt (In AI Squared). Products such as these have huilt-in features that 
enable users to: 

• Magnify screens up to 16 times or more 

• Select different modes ol operation, such as the ability U> apply magnification to the full 
screen or to move a virtual magnifying lem over any part of the screen 

• Place the cursor over on-screen text and have the software read it 

• Have tin- software speak text as you type it, a letter or word at a time 

• Select different color schemes that invert screen colors or substitute viewable colors for 
pro We m colors 

• Change to an enhanced mouse pointer or text entry cursor that is easier to find and track 

• (Control the systems voice, personality, speed, pitch, and language 
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i i Mimii.iti<>n <>t how a screen magnifier looks in I. I which r 

nifio the part of the screen around the mouse cursor. The user can set both the magnification 
power and the si/e of the lens viewer. 

IVsigners can help th«*ve with low vision bv creating screens and page designs that enhance 
the contrast between the foreground and background. Since graphics tend to pixcllatc (their 
edges look like stairs I when zoomed, reduce or eliminate the use of bitmapped text. 


Blindness 

According to the Disability Law Resource Project (DLRP), about 4% of the U.S. population, 
or 10.4 million people, arc visually tinpuned or blind. Web accessibility initiatives focus on this 
group, since their ability to access a Web page depends heavily on bow it is coded. The blind 
cannot use a monitor or tvpical mouse. To access software or websites, they must use a soft¬ 
ware program called a screen reader 
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SCREEN READERS A screen reader is software that converts the text on a Web page or software 
program to synthesized speech. Three of the most widelv used screen readers are IAWS thv 
Freedom Scientific). Window-Eyes (by GW Micro).and Home Page Reader (by IBM). JAWS 
and Window Eyes work with browsers and any software loaded on the computer, including 
the operating system, while Home Page Reader works only with Web pages. 

Don’t contuse these screen readers with the reading capabilities of the screen magnifier prod¬ 
ucts we discussed earlier. Screen readers that are intended for blind or nearly blind useis offer 
greater flexibility and features, though they are often more complex to set up and learn. 

Rather than simply reading the text that appears on a Web page, screen readers read portions 
of the underlying H 1’ML code. This means that some websites may be translated into an inde¬ 
cipherable jumble. With just a little knowledge and effort, though, developers can tailor their 
HTMl code to enable screen readers to present the site’s content efficiently. 

For example, screen readers ignore any graphic images on the page or screen. To help blind 
users benefit from images. Web developers can provide concise text descriptions of the images 
using HTML’s alternative text or alt tag. For example, if a Web page includes a photo of Mount 
Kushmore. the developer can provide an alt tag that includes live text, "Photograph of Mount 
Kushmore showing sculpted busts of American presidents George Washington, Ihomas 
Jefferson, Theodore Roosevelt, and Abraham Lincoln.'* 

It is especially important 
to use alt tags for graph¬ 
ic images used as menus 
or individual links. 

Without such text des¬ 
criptions, a blind user 
will not be able tell 
which links lead to 
which pages. Likewise, 
include an alt tag for 
each hotspot (active 
area) of an image map 
akmg with a redundant 
text link that matches 
each hotspot. You have 
probably seen these 
redundant links near the 
bottom of some Web 
pages, like the one in 
Figure 11-9. 





f*l*i■ Ar H V 


11-9 


For Web pages that include an image map, redundant text Hnis positioned neai the bottom of 
the page provide an accessible atternat .e 
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Because screen readers ignore graphic images, they also ignore text that is in bitmap form. 
Midi as logos created by a paint program other good reason to limit the us, \ 

bitmapped text wherever possible, even though providing the text represented by the image in 
an alt tag makes this text accessible. 

TABLES PRESENT SPECIAL CHALLENGES Unless specially formatted for accessibility, tables 
present special challenges lor screen readers. The problem is that some screen readers simply 
read the text row by row, which results in meaningless information. The example shown in 
Table III illustrates the problem. 


11-1 

TaOtis Present Chdile-ujcs 



When this table is formatted normally, here is how a screen reader might interpret and read 
it to a blind user: 

"Table with »ix columns and three rows. Team. Coach. Win*. Losses. Game Day. Time. 
Panthers. Williams. Seven. Three. Saturday One o'clock. Wildcats. Meyer, l ive. Live. 
Sunday, 'lien-thirty.” 


Notice that when the screen teadci attempts to read the contents of this tabic in linear fash¬ 
ion, the meaning is lost. When the table is formatted for accessibility, however, here is the 
result: 

"Team Panthers. Coach Williams. Wins seven. Losses three. Game Day Saturday. Time 
one o'clock. Team Wildcats. (oach Meyer. Wins five. Losses five. Game Dav Sunday. Time 
ten-thirty." 

Notice that in this example, the column headers arc read along with each cell s data. This 
makes the table’s content meaningful to blind users. This improvement is accomplished with 
techniques such as using table headers to label rows or columns of data. For more informa 
tion about these and other techniques, see Guideline 5 of the W3C* Web Content 
Accessibility Guidelines, at the L'KI listed earlier in this chapter. 


Color Blindness 

The Dl RP approximates the number of people who experience some color impairment at 
|U% of males and .5% of females The incidence of males with this deficiency is higher 
because color blindness is a genetic, sex linked trait. 
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Being color blind does not mean seeing only black, white, and shades of 
gray. Although there is a form of color-blindness that causes the total 
inability to perceive color, this is a rare condition. Much more common 
is that individuals will have difficulty distinguishing one or more colors 
from each other. Colors that cause the most problems are reds, greens, 
oranges, and yellows. 

Since there are diltercnt types ol color blindness, designers cannot fix 
the problem by simplv avoiding certain colors or color combinations. 

The best way to minimize color differentiation problems is to increase 
the contrast between foreground and background as much as possible. 

Use dark colors on light backgrounds or light colors on dark back¬ 
grounds. 

As we discussed in the beginning of this hook, avoid using color to con¬ 
vey meaning. For example, don't change the text color of an improper¬ 
ly filled-in field to red. Instead, display the word ‘‘invalid” by each 
improper field or use a reasonable alternative. Note that simply placing 
an asterisk bv e.ich improper field may make it difficult for blind users 
to determine the meaning of the asterisk. 

Otaf-Blindnist 

I ' can neither see nor hear. This condition presents special accessibility chal¬ 

lenges, since screen readers used alone produce spoken output that is useless to a deaf-blind 
person. 

Deaf blind audiences can use an electronic device called a refreshable braille display to access 
the content of websites and software. Figure 11-10 shows a refreshable braille display. 

Most of these braille displays are designed to fit between the computer keyboard and the user. 
Used in combination with a screen reader, the braille display converts the screen reader’s out 
put to braille. The braille display contains a series of cdls, often 40 or Hit. The numiser of cells 


I tip! 

To test a screen design for read¬ 
ability to color-blind audiences, 
try capturing the screen and 
converting it to monochrome 
using image-editing software 
such as Photoshop. The mono¬ 
chrome version will highlight any 
low-contrast problems that are 
likely to cause problems for 
color-blind users 



8aaB»B*e£ 4 jfj3-3»aL0-ivttaatfa:acu#ek3«eB'i.4ii 
aoooa 0 rfl'o j o vb j it g« a a o.d 3D0'jye u cc c3 u : o uo t 



11-10 


Refreshable Braille displays raise a senes of 
pins to allow deaf bhnd users the ability to 
rood computerized content. Photo courtesy ol 
Freedom Scientific. 
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indiuKt the number of characters that can be displayed at a time. 80-cell displays can carrv 
the information stored in a full line of text. Smaller, fcwcr-ccllcd models display as much of a 
line•»poaribti i mshofabivtt i a theo-nti tin 

remainder of the line. 

Fash cell raises or lowers a combination of pins to make the braille version* of characters 
Although embossed braille characters are made up of six dots, computer braille contains eight 
dots. The two additional dots indicate underlined characters or numeric characters. 

The same considerations that guide the design and development of websites and multimedia 
software lor blind users applies to deaf-blind users as well, except that all information must be 
available in text. Simplify the design bv eliminating all extraneous information to make 
accessing your Web pages and software as easy as possible for deaf-blind users. 

Hearing Impairments 

Because so much Web content consists of usual media such as text and images, hearing- 
tmpatred users have been able to experience much of what the Web has to offer. The trend, 
however, is toward more multimedia content such as audio tiles and v ideo clips. I his increas¬ 
es the amount of information that i> inaccessible to hearing-impaired audiences 

For example, many online courses simply videotape an instructor delivering a lecture and 
deliver the video content online. Although manv deaf people have learned the art of lip read¬ 
ing. it is impractical to read the lips of a person speaking in a video clip 

First, the image is usually too small to clearlv see the lips form sounds. Video plaved hack on 
computer may be jerky, nuking the task of lip reading more difficult. Finally ihc instructor 
may look away or even turn her hack to the camera in order to write on the blackboard. 

As mentioned earlier in this chapter, providing a text transcript of the spoken portion of the 
content is an excellent solution. Technologies also exist to allow captioning of the audio jx»r 
lion of content, but this technology is not yet widely used. 

Mobility and Muscle Impairment 

Mobility impairments affect individuals' ability to move their muscles. Mild mobility prob 
Icnis mas only slightly affect someone* ability to use a computer mouse and keyboard. 

Mild mobility impairments often limit a person’s fine motor control. This nukes it difficult 
tor these users to move the mouse precisely to a small target while clicking the mouse. 
I>esigning lot this audience requires that we create buttons and other click targets that jre rel 
atively large in size and not too closely spaced. 
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Severe mobility impairments involving paralysis may require the use of special assistive tech 
nologics. There arc many different types of switches designed to activate in response to a push, 
touch, squeeze, putt of air, muscle twitch, or other stimulus. These devices take the place of 
the keyboard. I he\ allow the user to select characters for inputting to the software or Web 
page, and thev provide a means to tab from field to field. 

Certain Web page designs can txr extremely fatiguing for those with mobility impairments. 
For example, a person without the use of his upper or lower extremities may use a device 
called a head wand to select and activate kcvboard characters such as the tab key. If a Web page 
contains a long list of links above the page's content, users without disabilities can easily skip 
past the links by using the mouse or repeatedly pressing the down arrow or tab key. 

For the severely mobility impaired, though, it may he extremely fatiguing to make the head 
movements necessary to repeatedly activate the tab key. For this reason, wc recommend posi- 
honing lists of links near live bottom of tire page, so that users do not have to skip past them 
to access the page’s content. 

Applications and Web pages that require the use of the mouse arc inaccessible to these users. 
That is why it is important to provide some means of accessing all of the links and controls of 
your pages and screens via the kcvboard. 

Cognitive Impairments 

Cognitive problems are those that affect our ability to reason and respond with appropriate 
actions They range from the confusion we all feel when laced w ith a poorlv designed software 
and products to serious diseases such as Alzheimer’s disease and Downs syndrome. 

Following the design techniques we have discussed in this hook will help those with cognitive 
impairments. Web pages and software should be designed as simply as possible, with concise, 
clearly worded text. Controls should he arranged logically and options presented when and 
where they arc needed, l’he navigation should be simple and straightforward, with simple 
means to undo a mistake or return to a known screen, page, or state. 


Seizure Disorders 

Those who suffer from seizure disorders may experience seizures when subjected to rapidly 
Hashing images. Some Web-based banner advertisements use Hashing text or images to attract 
visitors. The frequency of such images has been identified in the range of 1 11/ to 55 Hz. To 
eliminate the possibility of causing such seizures, simple avoid displaying such Hashing 
images. 
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WEB AND SOFTWARE ACCESSIBILITY INITIATIVES 

Section 508 of the Rehabilitation Act 

Section 508 of the Rehabilitation Act of 1973 requires that electronic and information tech 
nologv, including websitCN and software, that is developed, procured, maintained, or u>ed by 
the federal government be accessible to people with eligibilities. On August 7. 19^8, then 
President Clinton signed into law the Workforce Investment Act of 1998, which significant 
expanded and strengthened the technology access requirements stated in Section 508. The full 
text <*t Section 508 is available at hti| .v.cectinn5t>K.gov / index .cfm?FuseActv 
Content8cir>=l2. 

Support for the Section 508 accessibility rules has lx*en steadily growing. Though intended tor 
federal government technology, some states have begun to insist that websites or software used 
within schools he Section 508 compliant. T his means that the websites and software that pub 
(idling companies provide will have to meet the accessibility guidelines. 

Although the guidelines do not apply to companies or individuals in the private sector, more 
and more companies are working to complv with them as well. It makes good ethical and 
financial sense for them to do so. 

The following is a summary of the Section 50<8 accessibility standards for websites, with exam¬ 
ples ot passing and (ailing practices for each standard. These examples are used with the per¬ 
mission of the W'ebAlM (Accessibility in Mind I initiative. Although following these guidelines 
does not guarantee compliance with Seel H>n 508, it is an excellent step to creating accessible 
websites. More information about Web MM can be found at http://www.webaim.orfC. 


SEC 508 STANOARD 

PASS 

FAIL 

fa) A text equivalent for every non¬ 
text element shall be provided (e g„ 
via 'ah*, "longdesc', or m element 
contend 

Every image. Java applet. Flash hie. 
video tile, audio tile, plug in, etc has 
an aJtdescnpbon 

A non text element has no alt 
description. 

ISee Note 1| 

Complex yiaphics (gtaphs. charts, 
etc I are accompanied by detailed 
text descriptions 

Complex gtaphics have no 
nhematrve text, or the alternative 
does not fully convey the meaning of 
the graphic 


The alt descriptions succinctly 
describe the purpose of the objects, 
without being too verbose (for simple 
objectsi or too vague tfor complex 
objects) 

AH descriptions are verbose, vague, 
misleading, ^accurate or redundant 
to the context (e g the alt text is the 
same as the text immediately 
preceding or following it in the 
document). 
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Air descriptions for images used as 
Imks are descriptive of the link 
destination 

4/f descriptions for images used as 
links are not descriptive of the link 
destination 


Decorative graphics with no other 
function have empty aft descriptions 
(alt= "1. but they never have 
ims&ng alt descriptions 

Purely decorative graphics have aft 
descriptions that say 'spacer, 
‘decorative graphic.' or other titles 
that only increase the time that it 
takes to listen to a page when using 
a screen reader 

SEC 508 STANOARD 

PASS 

FAIL 

(b) Equivalent alternatives for any 
multimedia presentation shall be 
synchronized with the presentation 

Multimedia files have synchrom/ed 
captions 

Multimedia files do not have 
captions, or captions which are not 
synchronized 

SEC 508 STANDARD 

PASS 

FAIL 

Id Web pages shall be designed so 
that all information conveyed with 
color it also availahlt without color, 
for example from context or markup 

If color is used to convey important 
information, an altarnative indicator 
is used, such as an estonsk C) or 
other symbol 

The use of a color monitor is 
required 


Contrast is good. 

Contrast it poor. 

SEC 508 STANDARO 

PASS 

FAIL 

Idl Documents shall be organized so 
they are readable without requiring 
an associated style sheet 

Style sheets may be used for color, 
indentation and other presentation 
effects, but the document is stiil 
understandable feven if less visually 
appealing) whan the style sheet is 
turned off 

The document is contusing or 
information is missing when the style 
sheet is turned oft. 

SEC 508 STANOARD 

PASS 

FAIL 

lei Redundant text links sha> be 
provided for each active regmn of a 
server-side image map. 

Separate text links are provided 
outside of the server-side image map 
to access the same content that the 
image map hot spots access 

The only way to access the knks of a 
server-side image map is through the 
image map hot spots, which usually 
means that a mouse is requeed and 
that the links are unavailable to 
assistive technologies 

SEC 506 STANDARD 

PASS 

FAIL 

111 Client-side image maps shall be 
provided instead of sarver-side 
image maps except where the 
regions cannot be defined with an 
availabla geometric shape 

Standard HTML client side image 
maps are used, and appropriate alt 
tags are provided for the imago as 
well as the hot spots 

Seivei side image maps are used 
when a client side image map would 
suffice 

SEC 508 STAN0AR0 

PASS 

FAIL 

(g) Row and column headers shall be 
identified for data tables 

Data tables have the column and 
row headers appropilately identified 
fusing the <th> tag) 

Oata tables have no header rows or 
columns 


Tables used strictly for layout 
puiooses do NOT have header raws 
or columns 

Tables used for layout use the 
headei attribute when there is no 
true header 
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SEC 508 STANDARD 

|h| Markup shall ba usod to 
associate data cetls and header 
colts for data tables that have two or 
more logical levels of row or column 
headers 

SEC 508 STANDARD 

|i| Frames shal be titled with test 
that facilitates frame identification 
and navigation 

SEC S0« STANDARD 

(|| Pages shall be designed to avoid 
causing the screen to dicker with a 
frequency greeter then 2 Hi and 
lower than 55 Hi 

SEC 508 STANOARD 

Ik) A test-only page, with equivalent 
information oi functionality, shall be 
provided to make a Web site comply 
with the provisions of this part, when 
compliance cannot be accomplished 
m any other way The content of the 
text-only page shall be updated 
whenever the primary page 
changes. 

(See Note 2| 


SEC 508 STANOARD 

(I) When pages ubltie scripting 
languages to Asplay content, or to 
create interface elements, the 
information provided by the script 
shad be identified with functional 
text that can be read by assistive 
technology 

[See Note 3) 


PASS 

Table cells are associated wdh tho 
appropriate headers (e g with the id. 
headers, scop* and/or skis HTML 
attributes) 

PASS 

Each frame is grven a title that helps 
the user understand the frame s 
purpose 

PASS 

No elements on the page dicker at a 
rate of 2 to 55 cycles per second, 
thus reducing the risk of optically 
induced senures. 

PASS 

A text-only version is created only 
when there is no other way to make 
the content accessible, or when it 
offers significant advantages over 
the 'mam” version for certain 
disability types 

The text-only version is up-to date 
with the 'mein' version. 

The text only version provides the 
functionality equivalent to that of the 
“mem” version 

An alternative u provided for 
components (e g plug ms. scripts) 
that are not directly accessible 

PASS 

Information within the scripts is text 
based, or a text after native is 
provided within the script itself, m 
accordance with lal in these 
standards. 

All scripts la g Javascript pop-up 
menus! are either directly accessible 
to assistive technologies ikeybosrd 
accessibility is a good measure of 
tins I. or an alternative method ol 
accessing equivalent functionality is 
provided (e g. a standard HTML knkl 


FAIL 

Columns and rows are not 
associated with column and row 
headers, or they are associated 
incorrectly 

FAIL 

Frames have no tides, or titles that 
ere not descriptive of the frame's 
purpose 

FAIL 

One or more elements on the page 
dicker at a rate ol 2 to 55 cycles per 
second, increasing the risk of 
optically induced tenures 

FAIL 

A text-only version is provided only 
as an excuse not to make the ‘mam* 
version fully accessible. 


The text-only version «s not up-to- 
date with the “mam* version 

The text-only version is an unequal, 
lesser version of the "main* version 

No atternatrve is provided for 
components that are not directly 
accessible 

FAIL 

Scripts include graplucs-as-texl with 
no true text altemetive 


Scripts only work with a mouse, and 
there is no keyboard-accessible 
alternative either within or outside of 
the script. 
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SEC 50B STANDARD 

(ml When « Web page requires that 
an applet, plug in or other 
application be present on the client 
system to interpret page content the 
page must provide a link to a plug-in 
or applet that complies with 
HIM 21(a) through |l). 

(See Note 4| 

(See Note 5| 

[See Note 6| 

SEC. 508 STANDARD 

(nl When electronic forms are 
designed to be completed on-line, 
the form shall allow people using 
assistive technology to access the 
information, field elements, and 
functionality required for completion 
and submission of the form, 
including all directions and cues 

SEC 508 STANDARO 

lol A method shall be provided that 
permits users to skip repetitive 
navigation links 

SEC 508 STANDARO 

Ip) When a timed response is 
required, the user shall be alerted 
and given sufficient time to indicate 
more time is requited 


PASS 

A link is provided to a disability 
accessible page M*ioie the plug in 
can be downloaded. 

All Java applets, scripts and plug-ms 
(including Acrobat PDF files and 
PowerPoint files, etc ) and the 
content within them are accessible 
to assistive technologies, or else an 
alternative means of accessing 
equivalent content is provided. 

PASS 

Al form controls have text labels 
adjacent to them 

Form elements have labels 
associated with them m the markup 
|i e the »d and for, HTML elements) 

Dynamic HTML scripting of the form 
does not interfere with assistive 
technologies 

PASS 

A link is provided to skip over lists of 
navigational menus or other lengthy 
lists of links 

PASS 

The user has control over the timing 
of content changes 


FAIL 

No link is provided to a page where 
the plug in can be downloaded 
and/or the download page is not 
disability'accessible 

Plugms, scripts and other elements 
are used indiscriminately, without 
alternatives lor those who cannot 
access them 


FAIL 

Form controls have no labels, or the 
labels are not adjacent to the 
controls 

There is no linking of the form 
element and its label in the HTML 

Dynamic HTML scripting makes 
parts of the form unavailable to 
assistive technologies 

FAIL 

There is no way to skip over fists of 
links 

FAIL 

The user is required to react quickly, 
within limited time restraints 


Note I: Until the fangdesc tag is better supported, it is impractical to use. 

Note 7 "Text-only" and "accessible* are NOT synonymous Text-only sites may help peopl* with certain 
types of visual disabilities, but are not always helpful to those with cognitive, motor, or hearing disabilities 

Note 3 At this time many elements of Dynamic HTML (client side scnpted HTML, which is usually accom 
plished with Javascript) cannot be made directly accessible to assistive technologies and keyboards, 
ospeciafiy when the onMouseover command is used If an onMouseover (or similar I element does not con 
ta<n any important information (e g . the script causes a button to "glow”! then there is no consequence 
for accessibility If this scripted event reveals important information, then a keyboard-accessible afterna 
tive is required 

Note 4 When embedded mto Web pages, few plug ms are currently d'/ectiy accessible Some of them 
(e g. RealPlayer! are more accessible as standalone products It may be better to invoke the whole pro 
gram rather than embed movies mto pages at this point, although this may change in the future 




Note $ Acrobat Reader 50 allows screen readers to access PDF documents However, not ail users have 
this version installed, and not all PDF documents are ted based (some are scanned in as graphics), which 
renders them useless to many assistive technologies It is recommended that an accessible HTML version 
be made available as an alternative to PDF. 

Note 6 PoworPomt hies are currently not dueetty accessible unless the user has a full version of the 
PowerPomt program on the cbent computer land not |ust the PowerPoint viewer) It is recommended that 
an accessible HTMl version be provided as well 


Part £ for Scripts. Plug ins. Java, etc 

The following standards are escerpted from Section 508 of the Rehabilitation Act f 1194 21 For the full text 
of Section 508. please see http//www access-board gov/news/508-fmal him 

SEC 506 STANDARD 

(a! When software *s designed to run on a system that has a keyboard, product functions shall be exe¬ 
cutable from a keyboard where the function itself or the result of performing a function can be discerned 
textuady. 

(bl Applications shall not disrupt or disable activated features of other products that are identified as 
accessibility features, where those features are developed and documented according to industry stan¬ 
dards Applications also shall not disrupt or disable activated features of any operating system that are 
identified as accessibility features where the application programming interface for those accessibdhty fea¬ 
tures has been documented by the manufacturer of the operating system and >s available to the product 
developer 

(cl A well-defined on-screen indication of the current tocus snail be provided that moves among interactive 
interface elements as the input focus changes The tocus shall be programmatically exposed so that assis 
live technology can track focus and focus changes 

(dl Sufficient information about a user interface element including the identity, operation and state of the 
element shall be available to assistive technology When an image represents a program element, the infor¬ 
mation conveyed by the image must also be available n text 

(el When bitmap images are used to identify controls, status indicators, or other progrartvnBt>c elements, 
the meaning assigned io those images shall be consistent throughout an application's performance 

(fl Textual information shal be provided through operating system (unctions tot displaying text The mini¬ 
mum information that shall be made available is toxt content, text input caret location and text attributes 

(gl Applications shad not override user selected contrast and color selections and other individual display 
attributes 

(hi When animation is displayed, the ^formation shall be drsplayable m at least one non-ammated presen¬ 
tation mode at the option of the user 

(i) Color codmg shad not be used as the only means of conveying information, mdicatmg an action, prompt 
ing a response, or distinguishing a visual element. 

(|) When a product permits a usei to adjust color and contrast settings, a variety of color selections capable 
ol producing a range ol contrast levels shall be provided 

(k) Software shad not use flashing or Winking text, objects, or other elements having a flash or blink fre¬ 
quency greater than 2 Hi and lower than 55 Hi 

(l) When electronic forms are used, the form shall allow people using assistive technology to access the 
information, field elements, and functionality required tor completion and submission of the form, including 
all directions and cues 
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The Web Content Accessibility Guidelines 

The Web’s primary standards organization, the World Wide Web Consortium (W3C), also 
publishes a set of guidelines to help designers and developers create accessible websites. The 
W document, culled the Web Content Accessibility (iuidclines (WCAG), has goals that arc 
similar to the Section 508 guidelines. In lact, Section 508 includes j table that shows how the 
two sets of guidelines correlate. 

The current \ersion ol the full W( AO document tas of this Itook's printing) is the 1.0 version. 
It is asailahlc at the following URL: http://wvww.Vorgn'R/l999/WAl-WF.Bt:ONTENT- 
19990503/. I he 2.0 version ol the document is currently under development and may Iv pub¬ 
lished prior to this book’s release. Consult this document site (or specific, up-to-date tips for 
making your websites accessible to the widest possible audience. 


Accessibility Tools 

There are resources available to help designers and developers expose and present accessihil 
its problems on their websites. Some of these, such as the Hobby website, are available for free 
on the Web. Others are available as part of I he most recent versions of Web and multimedia 
authoring software such as Dreamweaver and Mash. 


Bobby 

The Bobbv site (http://bobby.watchfire.com/bobby/htinl/en/index.jsp) is a free service that 
allows website developers to check a particular URI tor certain ivpes of accessibility problems, 
lire user specifies a l Rl and the site reports on am problems it finds. Sites that pass the 
Hobby test can display a “Bobbv Approved" icon, but keep in mind that not all sites that pass 
the test arc accessible For that reason, Web designers and developers should use Bobby as a 
tool, but not the only means of determining their site's accessibility. 


WAVE Web Accessibility Tool 

The WAVE tool, available for free at http://wave.webaim.org/indcx.isp, gives Web developers 
accessibi edback in (he form of icon* in erti in \peci ige. These icons 

show, for example, the text contained in alt text tags associated with each image on a page. 
Images that don't include alt text tags arc marked with a red and white "error icon. 

Although W'AVL does not pass or lari a page based on its accessibility, n can provide useful 
information that developers can use to help make their sites accessible. 
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Development Tools for Accessibility 

Macromedia has begun adding tools and options to its Web and multimedia authoring prod¬ 
ucts to help developers create accessible websites and multimedia. Products exist to add cap¬ 
tions to Flash movies, provide accessible behaviors in Director and Shockwave modules, and 
help create accessible websii igh Dft vel of accessibility sup¬ 

port varies by product, developers ate beginning to have the tools they need to create more 
accessible products. 

There are also third-party products, such as UsablcNet’s LIFT product, which works with 
Dreamweaver to diagnose and troubleshoot many common accessibility problems. 

Accessibility is one of the hottest topics in Web and multimedia design today. As the number 
<>l users with disabilities and personal digital devices increases, the demand for designers who 
understand accessibility issues and can applv them to their designs will increase as wdl. 


SUMMARY OF KEY POINTS 

• As the baby boom population ages, the number of people with some sort of disability is increas¬ 
ing. Those creating websites and applications for U S. government orgamrahons are required 
by law to satisfy accessibility requirements 

• Creating accessible websites and software often means providing equivalent alternabves. 
which are alternative means of presenting information. 

• When developing websites or software, ensure that they will work efficiently with assistive 
technologies such as screen readers, refreshable braille displays, screen magnifiers, and voice 
recognition software 

• Designers can help those with low vision by creating screens and page designs that enhance 
the contrast between the foreground and background. 

• To test a screen design for readability to color blind audiences, convert screens to mono¬ 
chrome using image-editing software such as PhotoShop The monochrome version will high¬ 
light any low-contrast problems that ate likely to cause problems for color-blind users 

• Applications that require the use of a mouse are inaccessible to those with certain mobility 
impairments. Provide keyboard control as an option whenever possible 

• Avoid rapidly (lashing images to reduce the chances of seuure in susceptible users 

• There aie guidelines and tools available online to help designers create accessible websites 
and software 
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in review 


What are equivalent alternatives, and why are they important to accessibility? 

How can you make an audio segment accessible to a deal audience? 

How do screen readers work, and what types of audiences are they intended to 
help? 

What is the primary purpose of a refreshable Braille display? 

Who are the Section 508 guidelines written to serve? 

6 Does it make sense to create and maintain both accessible and non-accessibfe ver¬ 
sions of software and websites 7 


exercises 


For sighted students, download a trial version of screen reader software, and try to 
access some of your favorite websites using the reader with your eyes closed. Try 
this expenment with several different websites to experience these sites as a blind 
user does 

For all students, select a website and submit a page of it to the Bobby website 
(http://bobby watchfire com/bobby/html/en/index |sp) to see if it meets any of the 
qualification levels as an accessible page This will also show the types of obsta¬ 
cles the page presents to visitors with disabilities. 






































objectives 

Describe when to creote simple pencil-sketch wireframes and when it is appropriate to use 
draw ch presentation software to create more polished wireframe documents 

Identify the components of a wireframe drawing end how to successfully set up a wire¬ 
frame document 

Analyze hew to choose software that is best suited to wireframe creation 

Examine when and how to create storyboards to illustrate use cases 

Oescribe when to use artist's concept screens to show possible graphic treatments of a 
wobsite or software 

Describe when and how to create lunctional prototypes, including useful functioning vet- 

sions ol wireframe documents 

Identify which types of items to mclude in a style guide 

introduction 

You've done your research, analyzed your target audience, organized features and functions, and 
brainstormed some truly creative ideas for your website or multimedia protect Now it's time to com¬ 
municate your user interface design ideas to your chord, the development team, and other interest 
ed stakeholders. 

Web and multimedia designers specify their designs by creating sets ol papet based drawings 01 
electronic representations of what the finished product wil be like These specifications can range 
from crude pencil sketches to slide shows to highly lunctional prototypes Each type of specification 
satisfies a panic ular set of goals. 

What are the different methods you can use to specify your designs? How can you determine which 
specification method is most appropriate to a given situation? What are the advantages and disad 
vantages of paper-based and electronic specifications? When does it make sense to create a func¬ 
tional prototype and when is it a waste ol your time? 

The purpose of this chapter is to explore some of the most eflectrve ways to specify a design 
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SPECIFYING THE DESIGN 
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WHY SPECIFY THE DESIGN? 


There are several good reasons to create a specification of your design. 


It Helps You Think through Important Issues 


Creating a specification forces wu to tlmik through issues such .is the organization of each 
screen or page's content and the lavout of the controls you select. The priwexs of creating the 
specification brings up many issues that cannot he adequately anticipated. 

Creating a specification helps ensure that your design can accommodate all of the features you 
have planned for it, while helping you to keep from accidentally omitting any features that you 
intended to include. 

The specification can also enable you to work on the general layout of elements on the page 
or screen. You may discover that you hasc included too many elements on a single page and 
need to reorganize by moving some to a different page. Sometimes you think that a particu¬ 
lar method of accessing a function or navigating makes sense until vou specify it and see how 
it actually looks and feels The specification process helps vou root out such problems rela¬ 
tively early in the design process 


It Communicates the Design to Clients. Team Members, and Users 


The specification communicates the design vision to clients, members of the development 
team, and other stakeholders It serves as a focal point for discussions, illustrating the design's 



website can he engineered 

As we've previously stated, making changes to specification documents is much less expensive 


than making them to "finished code, artwork, or multimedia. To he effective, the specifica¬ 
tion must mode! the finished website or software, it need not look and operate exactly like the 


finished produci. but like a blueprint represents a finished building, it must accurately convex 
the product's essence. 


If you are working as pan of a development team, the team should 
review all specification* to ensure that the design being proposed is pro¬ 
grammable and that the intended functions are represented. The speci¬ 
fications guide the development of the product. 


TIP | 


It is useful to keep your outline or 

list of functions handy so that you Your client will review the specifications vou create and recommend 


can refer to it and check off tea- changes as nccessarv. This check ensures that the product represented bv 
tures as you accommodate them 
in the design 
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the specification meets the client's expectation*. When the client 
approves the specification, the development team can proceed with the 
development of the software or website. Tins topic is explored further in 
Chapter 14, in the section "Forming and Maintaining Strong Client 
Relationships" 

The specifications can also be used for performing early usability testing 
of the design on selected members of the target audience. The procedure 
for using specifications for this purpose is covered in Chapter 13, 
“Performing Usability Testing”. 



Don't cut corners by creating 
'quick and dirty" specifications 
or by only specifying part of your 
protect The discipline that crest- 
mg the specification imposes is 
vital to ensuring the quality of 
your finished product 


TYPES OF SPECIFICATIONS 

Prototypes 

The word prototype can convex varying meanings to different designers and developers. Some 
groups use prototype to describe an electronic representation of a website or software pro* 
gram that include* some functionality. Other groups call their crude penal sketches proto¬ 
types. 

The word prototype simply means example.” Therefore, we can classify all of the types of 
specifications we will discuss in this chapter—from pencil sketches through functional frame¬ 
works—as prototypes. 


Wireframes 

Wireframes are schematic drawings that represent pages or screens of a website or software 
program. They are named for the simple representations of 3D drawings that look like wire 
mesh bent into a particular shape In drawing, the wireframe shows the basic shape of the 
finished object without its finished, rendered skin, likewise, the wireframes that user interface 
designers create show the bask composition of elements on pages or screens, without sug¬ 
gesting the finished graphic look. 

Wireframes can be quick pencil sketches or polished-looking drawings generated using draw¬ 
ing software such as ConceptDraw, Illustrator, or Visio; presentation software such as 
PowerPoint; or website authoring software such as Dreamweaver or Frontpage. Although it is 
beyond the purpose of this book to recommend a particular wireframe creation tool, later in 
this chapter we will describe some characteristics of good wireframe-creation software. Use 
wireframes to convey the overall fed of the software, including its navigation and the funt 
tional layout of its elements. 
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Pencil-Sketch Wireframes 

IVnul-sketch wireframes are great for quickly recording idea*. Grab a pencil and paper for 
doing early design work—perhaps to try several possible approaches to a design problem. 
Figures 12-1 and 12-2 show two different approaches to organizing content on a website cre¬ 
ated tor floral designers. 

I Vsigners often submit these early sketches to clients lor approval or to select one of several 
approaches. In fact, one advantage of pencil sketches is that clients never mistake them for the 
finished product. A disadvantage is that clients may expect a more polished looking deliver 
able than a series of crude sketches. Therefore, once the client selects or approves an overall 
approach, it is a good idea to switch to creating software-based w ireframes (described later in 
this chapter l to flesh out the design. 


12-1 


A pencd-sfretch wreframe rs 
useful fin qiitchlv compering 
two pouiltfe approaches :a e 
iW**gn challenge Approach A 



12-2 










a. 





Aoproach B 
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Keep Template sheets handy to quickly sketch out ideas. Create each rec¬ 
tangle in the template sheet to the scale of 4:3, which matches The aspect 
ratio of today s screen resolutions. A 4:3 screen resolution simply means 
that there are lour horizontal pixels lor every three vertical ones. The 
common screen resolutions of 640 by 4*10,800 by 600, and 1024 bv 768 
all reduce to 4 by 3. 

Use the onc-up versions (the largest rectangle! if you like plenty of room 
to sketch or for screens requiring lots of detail. Use the two-up template 
for showing two approaches side-by-side or for showing a progression. 
Use the four up template when you want to try multiple approaches or 
sketch a longer progression of screens. 



Create one-up, two-up. and four 
up screen template sheafs using 
draw software. A sample four-up 
template is shown in Figure 12-3. 


12-3 


Create simple w»ret»ame template sheets in one up. two up. and toui-ep (shown here* versions end keep purity o hen! • i. • m, 

quick sketches 
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Software-Based Wireframes 

As mentioned above, many interface designers like to create software-based wireframes. 
Figures 12-1 through l2-*> show a series of wireframes that specify- key screens of the floral 
design application we explored previously. 

Software-created wireframes, such as the ones shown in Figures 12-4 through 12 9. suggest 
the fm i • i lavout of dements, hut allow the graphic artist creativity in designing the look 
of the screens or pages. The software t«*o|s available today make it possible to design manv 
screens and pages with speed, consistency, and professional-looking results that pcmil sketch 
es cannot duplicate. 

Notice that the wireframes shown in Figures 12 4 through 12 9 include explanatory text The 
text includes information such as: 

• I’nder what circumstances the page or screen is displayed. For example,“This screen is dis¬ 
played when the user slicks the Log On button." 

• The main purpose and operation of the page or screen. For example. “This screen enables 
users to add or remove members to or from a distribution list.” 

• The ctfes t of disking any of the controls ptev-nt on the screen- For example, “tlicking live 
Save button saves the user's selections and returns to live Main Menu." 

• Special notes to the engineers, graphic artists, quality assurance personnd. or other mem¬ 
bers of the development team For example. “Note to engineer: Please highlight anv 
required Fields that the user leaves blank when the user clicks Save.” 

• Special notes to the client. For example, "Note to client. We recommend providing a hint 
that suggests the next step to users." 

CREATING SOFTWARE BASEO WIREFRAMES The best was to devdop speed and accuracy 
when creating wireframes is to plan ahead. Create and vase a basic template page that pro¬ 
vides the overall elements you want to include. Our template includes an area for each screen s 
title, a rectangle drawn to a 4:3 aspect ratio to represent the screen or Web page area, a text 
description area, and a footer area for including information such as the date, name of the 
project, and page number 

It is a good idea to create screen captures of a Web browser window, a Windows based appli¬ 
cation window, and a Macintosh window. Insert one of these on a background page to indi¬ 
cate the delivery platform lor which the finished software or website is intended. Include on 
theh.i und » tool n >n mans pages. Then 

add controls and elements to the foreground pages that use the background. 
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12-4 

Title Screen 



The Fk-rW 1 * 510 ) software aJt begri with a Tale rcreen The Tile screen will mehide artwork that complements 
the subject matter It wil abo mchr-ie a copyngbt menage 

The rtudeni t an advance by ckkjhg anywhere oo thu screen AJIer a set time has elapsed—e g, 10 
seconds—the s'Aware wil automate alv advance to the next screen 
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Search 



The Search page is 'displayed when the student advances past the Tile page The left frame centams the search 
area where the student can enter keywords to find genesa suuclsng particular entena The right frame onanaSy 
...ctjins mrtruct»c«* «. i tabs fot srirchng by a kit of genera oc common names 

Students can select up to three keywords The number by each keyword indicates how many entries exist for 
that keyword Selecting keywords and ckkag die Search button dksplayt results of the search r. the right pane 
(discussed Later in this document) 

rVk«g the I leus Selections biaton blanks all of die student's chores m die search fields 
CVciung the Glat *ary button hip lavs the Glossary (described lates in das docwnenti 
Ckkmg the Referenre (-utton cbsplays a menu of reference mfotmatioft The contents wl be detenraned later 
Ti' king the Website button knits to die Floral Tengri He 

Tirkirii the Help tutt n ksp-uys a browser window contamg c oet ext secswve help for die current icrren 
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12*6 


Select by Genus 



n*s itfcm u <hipUyed when the etulmt cfccki the Select by <3m>* tab 

The ttudenl rejects the dewed gewa, and the ^formation page for that genur ts dwplayed 

Ckkmg the Select by Con*no» Name tab w* pre-lute a hst water to tins ..<ie. except tha£ die tLeuoK-n luiues 
of the places vwD be tste i 
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12-7 


Search Results 




y ut» 




a 

- 




□ 

s 

□ 


VM tru^ IH* **1 *» im *1^-4 ffj» gv*ui 

Search Nmilii 

4«eft-i toova 


Comor N*mn;s? ScartftBar**# "ixttantr* 
br*54» RMpbCMy frost bar* no, *cor bar* t«» 
*k» K«c* 


Cocftscont) 


PtHtJ 

Cornier Nmi i i Rose Seoon Pro**. Ouc*m 


Comot Namtsi T« 


WMM* 


This new sh >w* the results of Ae student s search If more thin «.ne jeaech criterion is selected the software will 
dsp«lay the names of plants meeting aB of the stteued criteria Foe each plane found, the plant s genus and the 
common nances include 1 m that genus are kite i A thumbnad f the dose up view of the associated plant ts als 
•isplaved by each plant s n»ne The screen wfl scroll vertscaiv if necessary 

A key advantage of this page arrangeinent is that students can see the search catena that resulted m the list of 
found plants The student can then modfy the search catena f necessary without nangattng to a different page 

Whenever the student activates a search by clicking Hie S»»urh ^ utt on, the button becomes inactivated (grayed 
out) It ttavs inactivated unai the student nidifies the search catena by tele tang different k?vwcds or by 
ctearng the easting keyword selections This may serve as a rotate reminder to the student who has changed the 
search catena to elide the Search butt .a to generate new restdts 

Chckmg one of the hyp erlmked plant names displays the detade i mf. motion Mid mages for that plant (see next 
wireframe) 
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12-8 


Plant Details 



TIm page is haplaved when the stu-ient select* a genus it. the Results frame, shewn -n the peewous wreframe 

The left »ie of the page contains dare mages of plants represented n the genus a close-up view. a medium 
view. »4 a long-shot view of the fefrage The tight side ccntams the text descnptton of the genus The etiOre 
p^e wiM wertacally scroll to allow al of the nfoautoo to be wwed 

S talents <» click the Pronounce batten to hear a pronunciation of the geiws 

Students can click the Previous Genus or Next Genus kiks to view other genet a that meet die current search 
ertena A counter shows the number of the current genus n relation to the tecal number of genera found 

Ckkxig the Back to Search tutton seturw the stu-Jent to Hie sear ckreiultt screen. where an diet ge«*u may 
be selected foe hipiaymg or atr ther search may be perl cmed 
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12-9 


Glossary 


HHDl 

cte tiPn •> t.'nwwtenf dNo 

i * i a a * * 

i«p SUM Mw M bfemaa Pm M 

a 

ta§ 

s 

d UiMi d UaUmi [ 


Ifj. ’dUiSMid 


Glossary 


Ctm QUt try | 

ABCDltGHIJRLMNOPQRSTIIVWXYr 


m m ulw iwSiCk th«wd the » ne« 4 te 


Q 


nrtmmmaivhtc (at Wvoh fejR *K) Dpr^j r»4ia% swrvrvrtnc al r apatite :ft i^g dwOed rfito 

rstcmaaltr syiwniatcai bauos 


*mtm Ann*) ih# part at a stamen frat p^ortix p * and contains pooler and *« inuaiy born# on a 

stalk 

an.tngpfmni jf WWO€-mtflO a collection oftowws and ©tie* olar4 rralpr als comOlned w> an 
aefWeticaay pteas*ng manner 

baatilM* tmp iipp Pf) n*nng f**o l«s 

bon** toga at nm 

bud a small later» or femrwiai ctfoiuoeiame or. the stem or a plan feat may darwttop nto a flow 
fear, or ahoot 


The Jloiiify u <hspl*yed when the student ckk s the Glossary button on the to-oltai The Go t%my is Urocbed 
n itf own browser window. alowfeg the Gonary to remain open wfck the student u usmg other parts of the 
•ftwar * Saice the number of term* is reUttvety anal the ectee glossary is displayed on a angle p age 

licking *ne of the hypertext-inked alphabet* characters at the top of the screen scroll the lift of terms so that 
termi beginning with the selected letter appear near the top of the display The biked characters remar. at the 
top A the screen when the terms Mid defecations are scrc4ed 

The <3o*sary -hsplays the ph< <nebt spelling (where applicable) and the drfMon of the selected term 
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Here are some ideas to consider when creating electronic wireframes: 

• Use realistic client data when creating wireframes of reports and 
other data intensive screens. Yon will invariably uncover unanticipat 
ed characteristics of that data that will influence your design. Keep in 
mind that some clients will focus on this text to the exclusion of other 
aspects of the design, since it represents what they know best. 

• Create elements such as text fields with the characteristics (justifica 
lion, font, stvlc, size, etc.) you want, and then copy these elements as 
needed to other pages. This will save you the time and effort it takes 
to customize cadi text field. 

• When designing screens or pages containing text or other data, use 
the largest, longest, or most complex examples you are likely to 
encounter. This will help you avoid having to redesign later due to 
insufficient room to fit particular content. 

• Be consistent in the creation of elements. Use the same fool, font size, 
and style for all buttons, titles and holdings, and other text areas rep¬ 
resented in the wireframes. Copy elements from another page rather 
than creating new elements from scratch to ensure consistency across 
pages. 

• Use each wireframe page’s title as the name of the page. Give the wire¬ 
frame file the same name as the project name. Be consistent in your 
naming conventions across projects. 

• Create a naming convention for revisions to the wireframes and other 
deliverables. Including a sequence number or date in the title will 
help you locate the correct file later. 

Almost any draw or illustration package can he used to create wire¬ 
frames, hut not all software does a good job of it. Some software pro¬ 
vides functions that make the job easy, while others impose limitations 
that hinder the creation process. When choosing a software paskage to 
create wireframes, look lor the following capabilities. 

THE SOFTWARE CONTAINS A LIBRARY OF COMMON USER INTERFACE CON 
TROLS laiok for software that contains libraries of interface controls 
such as radio buttons, check boxes, lists, buttons, and menus. It possible, 
the software should offer libraries of controls for both Windows and 
Macintosh operating systems. Some even offer interface elements that 
match the look of specific versions of the operating system. 


I tipI 

The wireframe template used to 
create Figures 12-4 through 12-9 
has accommodated a wide vari¬ 
ety of protects, from the small to 
the very large, but it is by no 
means the only possible layout. 
Customize your wireframes to 
meet the needs of your protects, 
clients, and development team 


I TIP | 

When beginning a large project, 
you may find it useful to create a 
'shell* wireframe document The 
shell document allows you to 
construct the overall organiza¬ 
tion of the website or application 
software To create a shell docu¬ 
ment, first create the main back¬ 
ground page, then add empty 
foreground pages using that 
background Specify the title of 
each page you know will be 
included in the document. 
Besides helping you to organize 
the project, creating a shell doc¬ 
ument gives you an early accom¬ 
plishment that can help motivate 
you to dive in and accomplish 
more 
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The packaged controls that arc shipped with software often contain some intelligence that can 
help yon create screen and page designs very quicklv. Although it is possible to custom create 
each dement, the library items often perform this task better. For example, a scrolling text box 
that is included in a library has the intelligence to maintain the width of its scrollbar and the 
size of its arrow buttons as the text box is enlarged or reduced. If you create a scrolling text 
box yourself, you will have to resize parts of the scrollbar manually each tunc you resize the 
box. 


THE SOFTWARE MUST HANOLE MULTIPLE-PAGE OOCUMENTS WELL Some packages facilitate 

creating multiple-page wireframe documents, while others claim this capability but do so 

poorly. Look for software with these characteristics: 

• The software nukes it easy to insert, delete, reorder, and rename pages. It should be easy to 
navigate from page to page even in large wireframe documents of greater than 100 pages. 
Software that provides an index of the names of all pages, which allows you to select the 
page to view, is especially helpful. 

• The software allows you to specify one or more pages as a background. You use a back¬ 
ground to include controls and elements that arc common to many pages. If you change 
the background, the changes automatically affect all of the pages sometimes called fore- 
ground page *I that use that background. 

• Changing the zoom setting or scrolling a page affect* the entire document and not just the 

I it CM) be I Ott sequence when they 

arc all at different zoom settings and scroll positions. 

• The software allows you to cut or copv dements, then paste them to a different page or doc¬ 
ument while maintaining the same horizontal and vertical location as the original. 

• The software should provide the means to create a footer on each wireframe page contain¬ 
ing information such as the date, name ol the project, and page number 


THE SOFTWARE SHOULD SUPPORT EXPORTING TO COMMON FORMATS The software should 
enable you to save or export wireframes in a number of different common formats, including 
HTML, .pdf (Acrobat),.ppt (PowerPoint), and graphic formats such as 
. -|Pci, .PNli.GIF, and/or Windows metafile. This will enable vou to pub- 

TIP lish your wireframes on the Web or e-mail them to clients and off-site 

- team members. 


It is possible to fax wireframes to 
clients or off site team members 
If you expect to he faxing your 
wireframes, reduce your use of 
shedmg and color fills as much 
as possible to increase the read¬ 
ability of the faxed documents 


THE SOFTWARE SH0UL0 PROVIDE COMMON SHAPE-EDITING FEATURES 

I he software should make it simple to group and ungroup items, align 
selected items horizontally- or vertically, distribute items evenly hori¬ 
zontally or vertically, and draw standard shapes such a* rectangles, lines, 
and ellipses Some packages also allow you to apply the settings you 
assigned to one s!u|h- to other shapes. 
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THE SOFTWARE SHOULO PROVIOE COMMON TEXT-EDITING FEATURES You should he able to 
check, your spelling, search tor .1 text string and replace it with another, justify text horizon 
tally and vertically, set margins, and select fonts, styles, and colors. These functions should be 
accessible via toolbar buttons, menus, and shortcut keys. 

THE SOFTWARE SHOULD SUPPORT WYSIWYG WYSIWYG (pronounced “wixzy-wig") is an 
acronym for What You See Is What You Get. It simph means that your wireframes look the 
same w hen printed on paper as they do on screen. Some software may have problems correctly 
representing the positioning ot text within paragraph fields, especially in a printout. This mav 
make it difficult to accurately line up a control such as a radio button with text inside the 
paragraph field. 

THE SOFTWARE SHOUIO SUPPORT MULTIPLE LAYERS I avers allow >011 to include elements that 
you can selectively display or hide. One use of layers is to provide callouts in your wireframes. 
Callouts are text boxes w ith directional lines that call attention and provide information spe 
edit to a particular screen dement or component. You can use one layer to provide callouts 
for your clients and another layer for callouts to the engineers. At print or publishing time, 
you can specify which layers should he printed and which should he suppressed. 

Another valuable feature is the scripting languages that come with some draw and illustration 
packages. These are programming languages that allow you more control over the actions of 
particular elements or the wireframe document as a whole. If you take the time to learn the 
syntax of the language, you can add sophisticated functionality to your wireframes and pro 
tot y pcs. 


Storyboards 

The term storyboards is borrowed from the animation, movie, and advertising industries. In 
these applications, the creative team uses a storyboard to convey key scenes and story lines. 
Similarly, storyboards in user interface design show sequences of screens, pages, or steps. 


Although some designers use the word storyboanh synonymously with 
wireframes , we’ll define storyboards as a set of sketches or images that 
illustrate use cases Remember that earlier in this book, we introduced 
use cases as the sequence of steps a user takes to perform some function 
or operation. 

Storyboards are well suited to communicating use cases because they 
illustrate the series of screens that a user must access to perform a par¬ 
ticular task. Each storyboard image shows the screen to be accessed and 
the control or controls that the user must activate to display the next 
screen or step in the sequence. 



The helpful annotations or notes 
that you provide on your wire¬ 
frames may mask usability prob¬ 
lems by grving users information 
that won't be available in the fin¬ 
ished software or website Be 
sure to turn such annotations and 
notes off when usability testing 
your design using wireframes 
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As with wireframes, you can create storyboards using pencil and paper, or you can create them 
electronically. The storyboards tan include notes as necessary to help the viewer understand 

the steps. 

figure 12 10 shows a three frame storyboard that conveys the steps that a user of the floral 
design website will take to search for flowers with particular characteristics. 

A kev difference between wireframes and storyboards is that wireframes indicate all of the 
possible functions accessible on each screen or page, while a storyboard emphasizes only those 
controls needed to accomplish a particular function. Stated anothei way, wireframes empha¬ 
size the content within a given screen or page, while storyboards stress the connections 
between screens or pages. 


Artist-Rendered Concept Drawings 

Concept draw ings (or concept screens I give clients and the development team an example of 
how the finished website or software will look. Graphic designers create concept drawings for 
several reasons, including: 


• To think through the visual challenges of a protect 

• To get the client's approval of the graphic look of the software before creating all of the 
graphic elements for the project 

• To present several different visual approaches so the client can choose the preferred one 

• To solicit engineering’s feedback on the ease with which a particular graphic design can be 
implemented 



It is usually bast to deliver artist's 
concept screens electronically, 
since even expansive color laser 
printers can't exactly reproduce 
colors as they appear on screen. 
Since the finished website or 
software will be displayed on 
screen, that is how the concept 
screens should be displayed as 
well If the client insists on hard 
copies, send them as well, but 
tell your client to view the screen 
versions for color accuracy 


Figures 12 11 through Figure 12-14 show a sequence of concept draw¬ 
ings created for the floral design protect described earlier. 

Artists usually create concept screens using their favorite image creation 
software, such as I’hotoShop The artist usually converts the screens to 
JPEG or BMP format prior to delivers to the client. 

An effective way to deliver a set of concept screens is to include them in 
a PowerPoint presentation or Adobe Acrobat file. Both these products 
handle the navigation from one screen to the next and provide the 
means for the client to print hard copies. PowerPoint provides easy-to- 
use navigation, but. as of this writing, it shrinks the images slightlv to 
display them within its viewer. If these products don't provide the fea¬ 
tures you need, consider creating a simple, reusable viewer using 
Director or Flash. 
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12-10 


Storyboard* con bo us*d to lllostrato tfte stops that usois must toko to accomplish a gtvon task 


Task: Search for Plants Matching Specific Criteria 
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12-11 


Concept drawing by 
Deiek ftchanrt. 
Dolphin Inc 
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12-12 


Concept drawing by 
Derek Richards. 
Dolphin Inc 
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Concept drarwinq by 
Derek FUchards. 
Dolpbtn Inc 
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12-14 


Concept drawings 
give clients and team 
members a sense of 
what the finished 
producl *.11 took like 
Concept drawing by 
Oerek Richards, 
OolpNn Inc 
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Make your functional prototype 
more usable by giving your 
clients and team members visual 
cues to differentiate functional 
controls from nonfunctional 
ones. Consider including a small 
icon or border around "live” con¬ 
trols so your clients or team 
members won't waste time click¬ 
ing inactive controls Another 
approach is to allow users to 
click any control, and to display 
text explanations of those con¬ 
trols that are not fully functional. 
For example, the text might say, 
'Clicking this button will display 
a form that allows users to enter 
their home address and tele¬ 
phone number.” 


[TIPj 

Be sure to provide a means of 
Kfentifying each screen so that 
clients and team members can 
give you meaningful feedback 
Use a screen title or a page or 
screen number for this purpose 
It is much easier and useful for a 
client to say, ”Add the account 
number to the Customer Profile 
screen ’ than it is to say, "Add the 
account number to the screen 
that has client information on it ” 
Leave as little as possible to 
chance 


Web Frameworks and Other Functional Prototypes 

Functional prototypes allow clients and team members to interact with 
your design. The simplest functional prototypes allow users to dick 
buttons or controls to navigate to different pages. More complex proto¬ 
types may closely mirror the operation of finished software, even 
including simulations and data management. 

Here are some reasons for creating a functional prototype: 

• They can be used to show the operation of a particularly key. com¬ 
pelling, or tricky part of the design. 

• A functional prototype gives users a better idea of how the finished 
software or website will "feel" than a static document. 

• Some clients and team members aren't inclined to read all of the text 
included with wireframes. The) - can learn more from the design by 
clicking around. 

• It may not take much longer to create a functional prototype that has 
clickable controls than it takes to describe in text the result of click¬ 
ing each control. 

• In sonic circumstances, the functional prototype can be used as the 
basis for the finished software or website. 

Functional prototypes also have some disadvantages and cautions to 
consider: 

• Clients mav mistake a functional prototype for the real thing, and 
believe the site or software is further along than it actually is. It is 
important to set your client's expectations properly. 

• You may waste a lot of time creating a prototype in a language or sys¬ 
tem that is different from the one that will be used to create or deliv¬ 
er the finished system. Using the prototype as a basis for the finished 
product may onlv work if you are both the designer and the devel¬ 
oper. 

• If the functional prototype is substituting for wireframes, it may be 
difficult to describe the functions of controls that arc inoperative in 
the prototype. 

• Clients and team members may prefer to write their review feedback 
directly on paper based wireframes rather than having to create a 
separate document. 
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Many of today's draw ami presentation software programs provide the 
ability to assign actions to the shapes and other elements of your draw¬ 
ings. l"his gives us a relatively easy way to create a functional prototype 

If example, that when a ptttkuhl button is 
clicked, a different page of the document be displayed. 

Mam of these software programs provide free downloadable viewers to 
allow others to displjy the wireframes and functional prototypes you 
create. 

Style Guides 

A style guide is a document that specifies the design elements for a web 
site or software program, including standards or recommendations for: 

• Typography, including specifying exactly winch fonts, font sizes, and 
styles should be used for titles, headings, body text, copvright infor¬ 
mation, and so on 

• Color, including the palette and specific use of colors 

• Graphics, such as the proper use of the organization’s logo 

• Global navigation elements, including which controls should he 
included on each page or screen and how to link back to a central 
page or function 

• Other interface elements, including standards or recommendations 
for enabling specific types of actions 

• Templates and examples of good and had practices 

Cascading style sheets (CSS) are a powerful, widely accepted means of 
specify ing and controlling the style of a website. They have become an 
important component of style guides. Developers working on different 
parts of a site can use a common CSS to maintain a consistent style 
throughout the site. 

A style guide can be part of a larger specification document that 
includes conventions for related topics such as page naming conven¬ 
tions, content management, and site maintenance considerations. 


Functional Specifications 

Functional specifications, often associated with large government proj¬ 
ects, are like wireframes on steroids. They usually include the screen or 
page image portion of the wireframe, hut grratlv expand the text expht- 


I TIP | 

If the software you are using also 
supports exporting the document 
to HTML, then you can use it to 
create a functional Web-based 
prototype, sometimes referred to 
as a framework This offers the 
advantages of both wireframes 
and a functional prototype You 
can print the wireframes as a 
document, and then publish them 
as a functional Web-based 
framework. Clients can have the 
advantages of interacting with 
the design and writing com¬ 
ments on a paper-based version. 
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nations. They mav describe in great detail the actions that result from virtually any possible 
keystroke or mouse click and indicate the text of even error message and system prompt. 

Most websites and multimedia software projects are not of sufficient complexity to justify the 
amount of time and effort it takes to develop full functional specifications, t hey are men¬ 
tioned here because they are a type of specification that you may encounter in the workplace. 

As we have seen, the specification phase of a project is one of intense personal activity for the 
user interface designer. It is also one of the most satisfying phases of design. After all. what is 
more exciting than giving life and substance to your ideas, then sharing them with the rest of 
the world? 

Next we’ll examine how to subicct our work to the ultimate challenge—usability testing using 
live testers selected from our target audience. 


SUMMARY OF KEY POINTS 

• Creating specifications is important to communicate your design to the development team, your 
client, and end users who may be performing usability testing. 

• Wireframes convey the navigation and page or screen components using a schematic style 
They can be created by hand or using commercial software. They often contain text descrip 
tions of the effect of clicking navigational controls and other elements 

• Storyboards illustrate the sequence of steps needed to accomplish a specified task 

• Concept drawings illustrate one or more possible approaches to the look of a website or soft¬ 
ware. 

• Web frameworks and othei functional prototypes let clients and users experience the opera¬ 
tion of selected parts of the website or software. 

• Use style guides to specify design elements for the website or software Cascading style sheets 
provide control of the look of an entire website They can be an important component of styfe 
guides 
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in review 


What are the two most important reasons for creating specifications of your 
designs? 

2 Under whet circumstances is it appropriate to create simple, pencil-based wire* 
frame sketches 7 

3 What are some features of draw or presentation software that supports the creation 
of multiple-page documents? 

4 . What is the mam difference between wireframes and storyboards? 

5 . What are three advantages and three disadvantages of functional prototypes? 

6. Why are cascading style sheets an important element of style guides? 


exercise 


1. A client has asked you to create a Web application that displays entries m a month¬ 
ly photo contest and enables visitors to vote on their favorites. Create pencil-sketch 
wireframes showing at least two different design approaches to this challenge. 








V 
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b . InpodmoL/rttr: 
*deo camera 
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Pec order's 
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performing usability testing 
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objectives 

Identify the types ot usability tests and ba able to select the appropriirte type foi a given 

situation 


Examine the six stages ol usability testing 

Describe tho purpose ol a test plan and examine how to croato one 
Identity the criteria for selecting participants for a usability test 
Identity the components ol a testing environment 
Examine how to conduct a usability test 
Identity the components of a usability test report 


introduction 

Usability tests are the only reliable way to determine if the design for e website or software apph- 
cation is usable by its intended audience Some companies avoid usability testing, believing it is 
time-consuming, complicated, and expensive. Usability testing pioneers such as Jakob Nielsen. 
Jeffrey Rubin, and Rolf Molich have proven that usability testing can be accomplished quickly, eas¬ 
ily, and inexpensively 

When most people think of usability testing, they assume that it is an actual websitt 01 software that 
is being tested To be most effective, however, usability testing should begin well before any soft¬ 
ware is created For example, exploratory usability tests can help determine which features to 
include in the project. Assessment usability tests are useful starting at the wireframe stage of 
design, through prototyping, and near the time of release or website publication 

In this chapter we will explore how to plan for, set up, and conduct basic usability tosting and how 
to use the results to improve your designs 
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USABILITY TESTING BASICS 

Don't Depend on Designers to Judge Their Own Designs 

The simple fact is that designers are rail the hot pudges of their own designs. No designer ever 
intends to create an unusable design. We designers honestly believe that our designs arc 
usable—alter all. they are usable to 10. Remember, though, that our orientation, background, 
experience, and expectations arc likelv to differ widely from those of our intended audience. 
These differences translate into usability problems that designers simply cannot anticipate. 

Some designers believe that performing audience research ensures that the design will be 
usable by that audience. Unfortunately, this is not the case. Audience research gives us valu¬ 
able insight into our users' needs, helping to ensure that the features we include are appropri¬ 
ate and useful. It does not guarantee that users will be able to easily find and use those features 
i|»lish then tasks. ( 'nls usabilitv testing can determine | 

Another approach that some companies use is to have a usability design “expert' perform a 
review I often called a heuristic evaluation i of a website or software program. The expert then 
recommends design changes to improve usability. Although this strategy may improve an 
existing design, it is not nearly as effective as usability testing with real users. I leunstw cv alu- 
ations may be based more on the reviewers opinions than research. In fact, the reviewer may 
identify “problems" that don’t exist for actual users. Like the designer, the reviewer does not 
have the same perspective or needs as the target audience. Only users behave like users. 

Test Often Using Small Groups 

.According to research performed by lakob Nielsen and others, it is better to conduct more 
tests with fewer users than to conduct a single test with a large number of user' According to 
Nielsen, three tests of five users yields much better results than one test of fifteen users Fisc 
users seems to he an optimum number, although a test with as few as three or four users is 
sufficient to root out most significant flaws in a design. 

i Uhl ! tarn may not 

people tend to find fewer problems. Further, in every group there arc sonic members whose 
software or Web usage patterns are different from the maturity of the audience. By studying 
lust one or two people, you increase the chances that someone selected as a participant discs 
not accurately represent your audience. Selecting more testers reduces the effects of such non- 
representative users. 

One problem with a single, large test is that all or nearlv all testers will be discovering the same 
major problems in a design. These major problems mav keep testers from delving deeper into 
the design to discover less-obvious usability problems. By testing with small group' and spac- 
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ing tests over time, designers and developers have the opportunity to fix 
usability problems uncovered in the initial tests. This means that subse¬ 
quent testers arc tree to discover new problems with the design. 

Conducting multiple small tests over tinsc also helps ensure that 
redesign efforts are effective, since there is no guarantee that the 
redesign of a troublesome component will be more usable than the orig¬ 
inal. Modified designs require user testing to ensure that they solve the 
existing usability problems without creating new ones. 


Select the Appropriate Type of Usability Test 

Then* is no single type of usability test that works best for all situations. 
Nielsen, Molich. and Rubin have identified several distinct types of tests. 
We will explore four usability test types: exploratory, assessment, evalu¬ 
ation, and comparison. 



When testing the design tor a 
product with several distinct 
audience types, such as a web¬ 
site intended for both parents 
and children, be sure to include 
representatives ot both groups 
This will raise the number of total 
testers 


Exploratory Tests 

An exploratory test is conducted early in the design stage. It has two main purposes. First, it 
helps determine if the functions chosen for a website or software are useful and appropriate. 
Second, it establishes how well the design fits the participant's mental model. The user's men¬ 
tal model is the assumptions and expectations about how things should work for the tasks 
being examined. 

An exploratory test compares the types of functions or features the participant expects or 
hopes to find with those actually proposed in the design. The participant reviews the naviga¬ 
tional structure and offers comments about the functions represented and any that the sub¬ 
ject perceives as missing. 

For example, a participant may be presented with wireframes for the home page and top level 
category pages of a consumer medical information website. The monitor may ask the partic 
ipant if all the types of information or capabilities he would expect or hope to find on such as 
site are represented. Flo may also be asked whether he understands the meaning of all of the 
choices presented. 

The monitor may ask the participant to point out which control he would select to perform a 
particular task. The monitor then displays the wireframe rqsrcscnting the screen that would 
he displayed as a result, and the process continues. 1111’ participant points out confusing or 
unexpected aspects of the design. 'The monitor then probes the participant to find out how 
the feature could have been structured or presented more dearly. 
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The results of an exploratory test may change the functions or tasks that a website or software 
includes. It may also affect the naming and ordering of navigational elements. 


Assessment Tests 

An assessment test is the most common type of usability test It mav lx* performed midway 
through the design phase or near the telea.se date of the project. The assessment test is pci 
formed after the overall feature set and high-Irvd navigational structure have been detei 
mined. It helps determine how well the features have been implemented in the design. 

To conduct the assessment test, the monitor presents specific tasks to the participant. The 
monitor then observes silently while the participant attempts to perform each task. The mon¬ 
itor makes note of any difficulties the participant encounters with the interface while trying 
to complete each task. 

Using our medical website as an example, the monitor may ask the participant to find infor¬ 
mation about properly treating a chemical burn. The monitor then observes whether the sub¬ 
ject selects the proper category of information and can successfully locate the requested infor¬ 
mation. 

The monitor must resist the urge to help the subject in any wav, except if the participant 
begins to demonstrate extreme frustration or seems about to flee the test. In such a case, the 
monitor may abandon that task, making note of this result. 

Some assessment tests include a benchmark i standard of performance! for each task. These 
tests are sometimes referred to as validation tab. The benchmarks, usually in the form of time 
durations, may be derived from previous test data, or from measurements of previous ver 
sions of the website or software, or they mav be predictions about how long it should take 
users to accomplish these tasks. 

When participants are being timed or otherwise measured, thev may be given a group of relat¬ 
ed tasks to accomplish, requiring the subject to access more elements of the design. Using our 
medical website example, the participant mav be asked to determine the likely cause of a par¬ 
ticular set of symptoms and to find the name of a local doctor who specializes in diagnosing 
and treating that type of disorder. The benchmark for this set of tasks I for example, within 
two minutes) is included in the task list, but is not conveyed to the participant. 


Evaluation Tests 

Evaluation tests are similar to assessment tests, but are conducted after a website or software 
product has been released and is in use. Such a test may help a team determine which design 
changes to make to the existing product to improve its usability. 
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l ike assessment tests, evaluation tests mav include benchmarks for performance that may be 
compared against observed measurements and used as a basis lor recommending design 
changes. 


Comparison Tests 

The comparison test is used to compare two or more widely different approaches to a design. 
1 he wider the difference in the two approaches, the more valuable the resulting design is like¬ 
ly to be. Although this tvpe of lest mas be conducted at any time during design or develop 
ment, it is often used near the beginning of the project to arrive at the best approach. 

Hie participant is asked to perform tasks using each design. The monitor then probes to 
determine which design is easiest to use. Usually each design that is tested will have both 
advantages and disadvantages. The designer can use the results of this test to develop a design 
that incorporates the strengths of each tested approach. 

Table 13-1 compares the four types of usability tests. 

3 b i«j 13-1 I 

As tins table shows, there si* ditfme'U types of usability tests tor different purposes Be sure to choose the tight 
type of test, and conduct it at the appropriate time 


USABILITY 

TEXT TYPE 

WHEN TO 
PERFORM 

TESTS PURPOSE 

TEST METHODOLOGY 

Exploratory Test 

Early in the 
design phase 

Compare how well the 
functions presented 
match the users' 
mental model 

The participant is asked to compare website/software 
features with expectations, assumptions, and hopes 

The monitor probes lor contusing design elements 
and asks lor subject's recommendations. 

Assessment Test 

Early to 
midway 
through the 
design phase 

Determine how we« the 
features have been 
implemented 
in the design 

As the participant completes given tasks, the monitor 
observes sdently and records any difhculbes the 
subiect has with the interlace. The monitor may time 
or otherwise measure the participant. 

Evaluation Test 

After a websrte 
or software 

is m use 

Determine if existing 
website or software is 
achieving its design goals 

Simdar to the assessment test, above 

Comparison Test 

Often early in 
the design 
phase, but may 
be performed 
at any time 

Compare two or more 
widely differing design 
approaches 

The participant is asked to perform given tasks using 
different designs The findings are used to select the 
superior design or create a new design that 
combines the strongest features of all the tested 
designs 
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SIX STAGES OF CONDUCTING A USABILITY TEST 

The six main steps to conducting 4 us.il>ility test are: 

I. Create the test plan 
1. Select the participants 

3. Prepare the test materials 

4. Conduct the test 

5. Debrief' the participant 

6. Convert the test results to recommendations 

1. Create the Test Plan 

As leffrey Rubin points out, you must have specific testing goals in mind, or you arc likely to 
find whatever results vou want to find, lust as wireframes serve as the blueprint for a website 
or software program, the test plan serves as the blueprint for the usability test. It summarizes 
the purpose, goals, audience, content, and methodology for the test, and includes the follow¬ 
ing information: 

• Purpose of the usability test • Test environment 

• Goals of the usability test • Roles of people involved in the test 

• Test-subject profile • Data to collect 

• List of tasks 

These points are explored in further detail below. 

Purpose of the Usability Test 

This section of the test plan summarizes why the test is being conducted. 

Goals of the Usability Test 

The goals describe what the test results are expected to accomplish. The National Cancer 
Institute's Usahility.gov website lists questions that the usability test may help answer. Some of 
these questions include: 

• Do uscts complete a task successfully? 

• If so, how fast do they complete each task? 

• Is that fast enough to satisfy them? 

• What paths do they take in trying? 

• l>o those paths seem efficient enough to them? 
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♦ Where do they seem to stumble or get confused? 

• What words or paths are they looking lor that are not currently on 
the site (or in the software) 

This section should also include the type of usability test (exploratory, 
assessment, evaluation, or comparison) that will lie conducted. 


Test-Subject Profile 

This section lists the characteristics of the users who will be recruited to 
participate in the usability test and the desired number of each type of 
user. 



Don't waste time testing every 
feature of a website or software 
program Instead, the list of 
included tasks should be based 
on the goals for the product, 
such as the marketing goals. 


List of Tasks 

This section contains the list of tasks that participants will be asked to attempt to perform. In 
some usability tests, users may be asked to state their first impressions of a website or software 
screen. These probes are also included in the task list. Note that sonic exploratory tests may 
not include a task list, but instead allow the participants to explore at will. In fact, it is a good 
idea to include free exploration as the final task of the test. The participant is free to explore 
any part of the website or software, thinking out loud during the exploration, ol course! 


Table 13-2 shows some examples of tasks that might be used when usability testing the floral 


design website we discussed in the preceding chapter. 




SAMPli TASK LIST 


1. What are your first enpressions of this page 7 What do you think of the layout colors, 
and other visual parts of the page 7 

2. Look at the options presented and tel me what you think each of the choices is for. 

3. If you were exploring this site, what would you do lust on this page 7 

4 Find a red flower that can be used as a focal point that is available year-round 
5. Perform a search that mterests you 
6 List all of the avertable plants of the genus Frankhma. 

7. Find the meaning ol the term anther. 

8 Oisplay the list of flowers that are most appropriate for a Mother s Day bouquet. 

9 Play the correct pronunciation of Ouarcus. 

10. List all plants of the family Asteraceee, 

11 Explore any part of the site you'd bke Please itwik out loud as you go. 


13-2 


Tasks are given to 
the participant 
one at a time to 
perform The list 
includes both spe¬ 
cific and open 
ended tasks 
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Test Environment 

This section describes where the test will take place and what equipment will be included. 
Although some companies and universities set up elaborate usability testing labs with maior 
investments in equipment and architecture (see Figure I-6), you can perform valuable usabil¬ 
ity studies with the roost modest of facilities. Some groups make extensive use of a portable 
lab. consisting mainly of a tripod-mounted video camera and a test monitor, that enables tests 
to be conducted nearly anywhere—at a client site, computer lab. office, or nearly anywhere. 

If your team works on many protects, you may want to set up a simple, inexpensive envi¬ 
ronment in which to conduct usability testing. Figure 13-1 shows one layout of such an 
environment. 

The basic usability-testing environment shown in Figure 13-1 consists of the following 

elements: 

• The room 

• Furniture 

• A computer 

• A video camera mounted on a tripod 

These elements arc discussed in further detail bdow. 

THE ROOM To make your usability participants as comfortable as possible, the room you select 
for usability studies should be relatively quiet and free of clutter. If possible, refrain from try¬ 
ing to turn a room being used for another purpose, such as the employee lunch area, into a 
usability lab. 

Flic furniture in the room is oriented relative to the door so that another worker can come to 
the door and get the attention of the observers) without disturbing or interrupting the test. 
A live foliage plant and soft lighting help provide a relaxing atmosphere. The plant is posi¬ 
tioned within the participant’s sight line. 

THE FURNfTURE A table or desk of appropriate height is used to hold the computer svstem. In 
our sample layout, we have positioned the table or desk so that there is room to fit a chair 
between it and the wall. This arrangement is suitable for testing using either a computer or 
documents such as wireframes. 

The monitor's chair is positioned in one of two possible positions, depending on the type of 
test In a computer-based test, the monitor’s chair is positioned slightly behind the partici¬ 
pant’s chair, but close enough to tec the computer screen and the subject’s fate. The partici¬ 
pant sits at the computer keyboard. In a paper -based test, the monitor or person displaying 
the wireframes sits across the table or desk from the participant. 
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figure 


13-1 


The venous elements of the usntxl 
<tv test room are carefully posi 
tioned to support the test goats. 


There should Ik a chair to allow an observer to watch the test as it is conducted. The obsers 
er s cltair is positioned near the back of the room. The observer should be able to see both the 
monitor and the subject. The monitor and observer sit behind the participant to enable the 
subject to focus attention on the software being tested. 

If you designate someone as a recorder to time the participant's progress on each task, then 
include an additional chair next to the monitor or on the other side of the participant, posi 
tioned clear of the video camera and the observer's view. 

In more elaborate usability lab setups, there is often a separate room for observers. In such an 
environment, a two way mirror or remote monitor allows these observers to watch the test 
without being seen by the participant. The observers may communicate questions or com¬ 
ments to the monitor and subject via passed notes. 
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THE COMPUTER The system unit, if any. tan Iv placed on the floor. The monitor and keyboard 
can he moved aside for paper-based usability tests. The computer may he loaded v% ith record 
ing software that captures the user's mouse clicks and keystrokes, the screens that arc dis¬ 
placed as a result, and the voices of the subject and the test monitor. 

More elaborate usability labs may include scan software that allows the computer images to 
be captured directly to videotape, without the need to videotape the screen. 

VIDEO CAMERA MOUNTEO ON TRIPOO I he video is positioned to clearly capture the partici¬ 
pant's mouse movements, keystrokes, facial expressions, the computer screen, and all spoken 
voices. Position the video camera in a location where it is least likelv to he accidentally 
humped by a test participant or someone entering the room. 

As mentioned above, connecting a line from the video camera to a display monitor in a sep¬ 
arate room allows many observers to view the results of the test without disturbing the test. 
More elaborate usability labs may include several cameras set to different angles and remote 
video controllers that allow a video technician to pan and zoom the video camera from anoth¬ 
er room. 

Roles of those people involved in the test 

THE MONITOR The monitor (sometimes called the facilitator or rest atlmmifirator) acts as the 
host of the usability lest. The person chosen to Ik the monitor should not have a strong per¬ 
sonal or professional stake in the outcome of the test. The monitor may have special training 
in monitoring usability tests. 

The designer should never serve as the monitor. The designer cannot be objective enough to 
run the usability test fairly. If a participant is having trouble figuring out how to navigate to 
or use a particular function, a designer serving as monitor might trv to help the participant in 
subtle wavs, mav become defensive about the design, or may even ignore or skew observations 
that run counter to the designer's opinions or decisions. For these reasons, the role of design¬ 
er should he observer rather than monitor 

THE PARTICIPANT The participant is the user who is testing the product that is the subiect of 
the usability test. Participants' main responsibilities are to follow the monitors instructions, 
to try to complete the tasks to the best of their ability, and to think out loud as they work. 

THE RECOROER A person familiar with the product being tcsled is designated as the recorder. 
The recorder has three primary jobs. The first is to record the steps that the participant takes 
to try to complete cash task. This is especially key when the test session is not Ix-mg video¬ 
taped. The recorder may be asked to tot down any dialogue between the monitor and partic¬ 
ipant and to record relevant observations. 
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The recorder also measures and records the time it takes the participant to complete each task 
on a logging sheet, explained later in this chapter.finally. the recorder may write down on the 
logging sheet the participant ’s rating of the ease or difficulty of completing each tasL 

THE OBSERVERS} Although reading usability reports provides insight, there is nothing quite 
like personally watching a participant struggle with an interface. For this reason, encourage 
members of the development team and management to observe usability tests. Whenever pos¬ 
sible, observers should be in a separate room from where the test is being conducted. As men¬ 
tioned in our discussion of the testing room, two-way mirrors or remote video monitors let 
observers sec the test as it unfolds. 

If the observers must be in the same room as the test, their number should be limited to one 
or two. More than two observers are likely to distract and intimidate the participant. 
Observers in the same room as the test being conducted must be completely silent during the 
test. Any laughter, talking, or whispering is likdy to distract the participant and the monitor 
and will disrupt the test. Observers in a separate but adiacent room to the test taker must be 
cautioned that their voices may carry to the participant. 


Oata to Collect 

The test plan should include a summary of the type of information you will be collecting from 
the usability test. The types of data you collect depends on the type of study you arc con¬ 
ducting. 

Examples of the tvpes of data that may be collected include: 

• The actual steps the participant took to attempt to complete each task 

• The lime it took to complete each task 

• The participants' rating of the ease or difficulty with which each task was completed 

• Participants' comments and recorder's observations that indicate the participant's satisfac¬ 
tion with the product being tested 

• The number of "errors," or diversions from the ideal steps outlined for each task 

In assessment tests that include benchmarks, the timings for each task are compiled and com¬ 
pared with the benchmarks for each task. Tasks that consistently exceed the benchmark are 
candidates for improvements to the design. 

Some studies use a five-point Likert scale to enable participants to rank the ease or difficulty 
of completing each step, with one being the most difficult and five being the easiest to com¬ 
plete. All participants' rankings of each step are compiled and averaged. Three is considered 
the lowest acceptable ranking. A task that averages lower than a three is considered a serious 
candidate for redesign. 
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2. Select the participants 

The participants should reflect the target audience for the product you are testing. 

Some development groups use outside usability test recruiters or temporary employment 
agencies to And participants. If you plan to do your own recruiting, consider maintaining a 
database of possible participants. Use a $cretnmg questionnaire (described below) to find can¬ 
didates that meet the criteria you set. Unless your participants are from your own company, 
you should pay or reward them for their time. 


3. Prepare the Test Materials 

The following list of documents will help prepare for a usability test: 

• Screening questionnaire • Consent form 

* Orientation and administration script * Post-test questionnaire 



13-2 


The Screening Questionnaire 

Use a screening questionnaire to prequalify 
candidates for the test and to help sdect the 
final group of participants. The screening ques¬ 
tionnaire enables you to select participants who 
possess the desired level of experience with the 
Web and. as appropriate, the application being 
tested. The questions you ask in your question¬ 
naire will he specific to your needs, hut Figure 
13-2 shows an example. 

Orientation and Administration Script 

The monitor begins the session by explaining to 
the participant the purpose of the test and its 
ground mles. To ensure that each subject hears 
the same instructions, the monitor writes them 
down in advance in an orientation script. The 
monitor reads the orientation script to each 
subject. The following shows a sample orienta¬ 
tion script. 


Use a screening questionnaire to help you select participants who 
match the experience level oi ether enter it you set. 
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Sample Orientation Script 


Thank you for coming today to help us test the design of [product name| The test will take about one hour We 
are inviting people like you to try out the product so that we can improve its design Please remember that it is 
the design we are testing, not you We want to find out how easy or difficult the product is to use. To find this 
out, we are going to give you a series of tasks to try to complete using the producL 

As you try to complete each task, we ask that you think out loud For example, if you can't find a way to get back 
to a screen you saw before, you might say, *1 don't see how to get back to that other screen’ This may seem a 
little strange, but by telling us what is going through your mind, you show us problems in the design that we might 
need to fix 

If we give you a task that you can't seem to do at all, don’t worry. Just try whatever seems like it might work If 
you get stuck, we'll give you another task to try Remember, if you can't do something, it's not your fault; it's the 
design that's not working 

As you use the producL there wtH be some people watching. I'll introduce them to you now [Introduce the 
observers and indicate whether they'll be sitting in the back of the room or in another room ] 

[If the session is being videotaped] We will be taping the session so that we can review and analyze it later. We 
will not use the tape for any other purpose. (Give the participant the video consent form.] Please read and sign 
th<$ consent form, which gives us your permission to videotape this session 

We have a total number of lx] tasks tor you to try to complete. Til read each task to you, then hand you a card 
that contains that task in case you want to review it When you have completed the task. I'M give you the next 
task, and so on 

Do you have any questions before we begin? 

Okay. I'll start the videotape now and begin with the first task Remember to ttunk out loud as you try to complete 
each task. I may occasionally ask you what you are thinking 

Task I; (Read the first task, then hand its card to the participant] 

(After each task is completed] Thank you Here's your next task 

[When the last task is compietel Thank you That was the last task I am going to turn off the videotape. Before 
you leave, I would like you to complete a short questionnaire We will not share or distribute the information you 
provide, and we won't associate your name with your answers 

(After participant has completed the questionnaire] Once again, thank you for helping us with this test today. 
(Pay the sublet if applicable!. Do you have any additional questions or comments about today's session? 
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Consent Form 

The signed videotape consent form gives your company permission to videotape the partic¬ 
ipant during the usability test. If possible, inform the participant Isetore test day that you plan 
to videotape the test. In the sample orientation script, the monitor hands the participant the 
consent form for signing him before the test begins. 

Figure 13-3 shows a sample videotape consent form. 



i 13-3 

The signed videotape consent form gmes the participant's perrwsson to wdootapt the 
usaMity test 

4. Conduct the Test 

The monitor conducts the test according to (he orientation and administration script. Listed 
below arc some guidelines for conducting the test. Many of these were suggested by and 
adapted from Rubin: 

• L>o not lead the participants. Let the subjects find the answer by themselves. 

• Put the participants at ease. 

• Be flexible. You may need to change the usability plan in response to a grven situation. 

• Never lose patience with a participant. 
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• Try playing dumb—it may lead to interesting remits. 

• Be a good listener. 

• Keep your body language and facial expressions neutral. 

Oon t jump to conclusions. Seek to discover patterns, but don’t let vour reservations color 
your interaction with the participant. 

The recorder uses a logging sheet to record the participant s results on each task. Figure 13 4 
shows a sample of a logging sheet that has been pre-filled with one of the tasks, lire logging 
sheet includes space at the bottom to record the time it takes to complete cash task. 



13-4 


The itconlnr notes tint participant's progress in complet-ng the task shown Each 
tBsk gets >ts own sheet and the tec order mciiides the participant's spoken c on- 
men ts and ranking ot the task's dirticulty. 
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As previously noted, the participant may also be asked to rate the ease or difficulty of com¬ 
pleting each task. Notice that the logging sheet in Figure 13-4 includes a l.ikcrt stale with rat¬ 
ings between one and five to record this information. Tasks that the participant is unable to 
complete receive a one, the lowest score. 

You may want to designate a maximum allowable time for each task. II the time limit is 
reached before the participant has completed the task, the recorder notifies the monitor. The 
monitor instrnit* the participant to stop the current task and continue with the next task. 

If the test becomes too intimidating or frustrating for the participant to continue, the moni 
tor will excuse the participant from completing the remainder of the tasks. The participant 
may still be asked to complete the post-tea questionnaire, discussed in the next section. 


5. Debrief the Participant 

When the tasks have .ill been completed, the participant is given the opportunity to express 
his overall opinions about the product being tested and the testing process itself. The post-test 
qucstumtuure is the means for gathering this useful information. 


The Post-Test Questionnaire 

The post-test questionnaire provides an opportunity for the participant to provide conclu 
sums and recommendations about the product or design being tested. The monitor advises 
the subiect that the information provided in the post-test questionnaire will not be shared or 
distributed, and the results will not be associated with the participant. 

figure 13-5 shows a sample post-test questionnaire. 



Show respect for your partici¬ 
pant by limiting the post-test 
questionnaire to iust a few key 
questions Ask open-ended 
questions—that is, questions 
that encourage sublets to 
express their opinions rather 
than just selecting a choice from 
a multiple-choice question. The 
participant's responses often 
provide useful insight. 


6. Convert the Test Results to Recommendations 

The goal of the usability test is to improve the product or design being 
tested. To achieve this goal, the test team summarizes the results of the 
test in a report. The report itself must be usable. Rolf Molich has ana¬ 
lyzed reports written by many different usability-testing groups. The 
results of his research form a useful set of best practices for writing 
such reports. 

KEEP IT BRIEF To be most effective, the report must be concise. Don’t 
make management or engineering wade through pages of log sheets, 
descriptions of testing methodologies, and olher noncssential infor 
mation Summarize the information in usable recommendations that 
the learn can convert to design improvements. 
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Post-T*st Quntionnair# 


fbi too th» of toe [product) ovw«iP 


Did TOM hnd * twy or drtkufc to c nm p ht r tor Uik* wr g«v* yo»> 


Wtatthnc* *d you Uw belt dbout the [product]? 


Wh* times about the [proAxtS vreuld you Mil kkr to change. md haw vmdd vat change the*? 


Did you esyay the expmet*e of pxtu c-Hii* r toil to*? Wh* c m wr do to mpcote this 

npemaci for fore nihfrcn" 


Thank you for hefcpmg us maker (product] great i 


pie l 13-5 


When all tasks are complete 
use the post-test questionnaire 
to ieco«d the participant's over 
all impressions and suggestions 


INCLUDE POSITIVE FINDINGS I’he usability report should include positive findings as well as 
areas for improvement. It is tust as important to know where the design is working as it is to 
know where it is not. If possible, try to include as many positive as negative findings. 

CLASSIFY COMMENTS Organize your report by classifying your results in specific categories. 
Create such categories as disasters, serious problems, minor problems, positive findings, bugs, 
and suggestions for improving the interface. This makes the results of the test easier to find 
and digest. 
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INCLUOE AN EXECUTIVE SUMMARY Sumnuim* the most important findings of the report in 
an executive summary that is placed at the front of the report. The executive summary should 
include the top three positive findings and the lop three problems. 

Rolf Molich provides a sample report that follows these recommendations at 
http://www.dialogdesign dk/utestreports.html. There arc manv other examples of usability 
reports available on the Web. 

Conducting usability tests at various points of a project's development, translating the results 
into recommendations, and following those recommendations is the only way to create a 
usable product. The experience of witnessing usability tests on the proiects vou design will 
make sou a better designer. Now it is time to turn our attention to the business of user inter¬ 
face design. 


SUMMARY OF KEY POINTS 

• Don t wait until you have a wotting website or software to begin usability testing. Have users 
review the proposed functions list and wireframes early in the development process. Test often 
using small groups 

• There are different types of usability tests for different purposes, including exploratory tests, 
assessment tests, evaluation tests, and comparison tests Each is unique according to its pur¬ 
pose, when it is performed, and its methodology. 

• Create a test plan to specify the purpose, goals, audience, content, and methodology for the 
test 

• ft is relatively simple to set up a usability testing room Some groups use a mobile testing lab 
that can be brought to users or the client site 

• The people involved in usability testing include the participant monitor, recorder, and one or 
more observers 

• The monitor reads an orientation script to the participant The script is read to ensure that all 
participants are given the same instructions. 

• ft is important that the monitor not attempt to lead the participant or otherwise skew the results 
of the test 

• A designer should nevei assume the role of monitor, since it is the design that is being 
evaluated 

• The monitor usually creates a report that includes the results of the test The report should be 
structured so that readers can easily understand its results and recommendations 
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in review 


I What is a heuristic evaluation, and what ate its limitations? 

I What are the major disadvantages of conducting a single usability test with many 
participants? 

3 What type of usability test is often conducted near the release date of a product? 

A. What is the role of the monitor of a usability test, and why shouldn't the interface 
designer play this role? 

5. What elements in the testing room are designed to make the participant at ease 
with the surroundings? 

6 Why go to the trouble of scripting what the monitor says to the participant? 

■ What is a logging sheet, and what are its major components? 

B What four things can you do to make a usability test report usable? 


exercise 


I Design a ‘nightmare* usability testing lab and describe how its operation and the 
roles of its participants differ from that of a well-run usability lab. If possible, form 
groups and create a skit that illustrates these problems The rest of the students can 
observe and record problems with the way the test is being run. At the end of the 
skit, see how many problems the students were able to identify. 









the user interface designer in professional practice 
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objectives, 


Analyze how identifying client motivators can serve both yon and your clients 

Examine effective strategies foi dealing with common client situations 

Oescribe two things to insist your clients do to save both them and you time and money 

Examine the possible conseguences ol overestimating your power in a client relationship 

Examine how to build your business through sales, proposal writing and creative partnering 

Identify whnt questions to nsk to protect yourself from unethical client practices 

Analyze how to set up and manage filing systems, communications, and other systems to 
increase the efficiency of your business 



intro 


etion 


The maioritv of this book has been devoted to providing you wdh the toots and information you need 
to design effective, usable interfaces In this chapter, we will explore the business ol user inter¬ 
face design 

We‘U start by investigating how to form and maintain the strong client relationships that are funda¬ 
mental to any design business's success Next well exemine how to sell your services, win proiects, 
and grow the business Finally, we ll cover some important office procedures that can help your 
operation run smoothly 
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FORMING AND MAINTAINING 
STRONG CLIENT RELATIONSHIPS 

Relationships Are Essential to Business Success 

When .1 client hires vou, you provide a service that the client needs in exchange for a consid 
cration, usually money. The client has the right to expect you to perform the work you have 
been hitrd to do with quality. According to an agreed-upon schedule, and at an agreed-upon 
price. The client has the responsibility to pay you Tor your work and to provide the informa¬ 
tion and timely reviews that vou need to do your job. You have the right, although not the 
guarantee, to make a profit from the work you do so that you can remain in business. 

Although a contract specifies many of the legal rights and responsibilities of the relationship 
between vou and your client, the human part can he much more complex, rewarding, frus¬ 
trating at times, and interesting. The legal part of the relationship is bevond the scope of this 
text. Our advice is to hire the best attorney and accountant you can afford to advise vou on 
the legal and financial matters that arise in the course of doing business. Wc will focus our 
attention on the human part of the client-vendor relationship. 

Your success in business hinges directly on your ability to create and maintain long-term bust- 
ness relationships. You. as the vendor with a service to sell, will usually take the lead in estab¬ 
lishing the relationship, working toward gaining your client s trust, support, jnd eventual 
business. 

Initially to some, this seems disingenuous or even manipulative. Aren't we lust trying to gain 
friendship so that we can profit from it? In fact, a good business relationship is one in which 
each party gains something of value. Although strong business relationships can blossom into 
true friendships, their primary purpose is to get something useful done. That can t happen 
unless someone takes the initiative to create and nurture the relationship in the first place. 


Win Client Trust through Performance 

Trust is fundamental to anv good business relationship. As a vendor, you want to perform in 
a way that inspires your client’s trust in you. Make a client look good in the eves of her man¬ 
agement, and you are sure to win her trust. To build trust, do the following: 

• C»et to know your clients and help them get to know vou. 

• Anticipate and satisfy’ your client’s business needs. 

• Be responsive to vour client s requests. Return telephone calls and messages the same dav 
whenever possible. 
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• lake accurate notes at meetings; include the date of the meeting, the location, the partici¬ 
pants, anv decisions, and issues requiring follow up. 

• Hollow through on the promises and commitments you make—deliver what you promise. 

• Conduct yourself professionally and ethically. 

• Send your client occasional useful articles about best practices or developments in their 
industry. 


Take a Genuine Interest m Your Client 

Clients like to deal with those they know and who know them. Take the time to learn about 
your client as a person. If you are genuinely interested in someone, it’s not difficult to find out 
if they have children, what types of vacations they prefer, if they have pets, and what kinds of 
hobbies they enjoy'. 

It may be appropriate to send a small holiday gift to clients, especially if the gift hears your 
company's name or logo. But don’t attempt to buy vour way into your client’s heart with 
expensive gifts. Such gifts smack of bribery and may violate your client's company's policies. 
There are plenty of other legitimate ways to show clients that you value them. 

For example, pick up the telephone and ask your client’s opinion on a design issue for which 
two more or less equally valid solutions exist. Tell her that you are considering two approach¬ 
es and would like her opinion on which she prefers, tx plain why you are favoring one 
approach over the other, and ask if she agrees or not. If she disagrees, be sure to thank her for 
her counsel, and implement the feature according to her wishes. In addition to building her 
trust, you will be learning about her preferences, which will enable you to anticipate her 
reactions. 


Oiscover Your Client's Motivators 

What pressures is your client facing 7 Is there a specific event date, such as an important pres 
cntation or rollout, which she is under pressure to meet? Knowing this information can help 
you make suggestions that help both you and your client. 

For example, clients frequently have asked us to produce a finished website or multimedia 
software by an impossibly aggressive schedule. On several such occasions, we prolvcd further 
and discovered that the clients needed to demonstrate the product at an important sales con¬ 
ference or for an important client of theirs. We suggested creating a demo version ol the prod¬ 
uct instead of the full version by the required date, which satisfied our clients' needs and 
relieved the pressure on us. 
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Learn Your Client's Style 

Clients come in all flavors. 'Hie best clients arc those that view you as an equal partner. They 
do their job without trying to do yours, too. They provide the information vou need in a time¬ 
ly manner and make only reasonable requests. They respect your expertise and recognize vour 
time's value. They pay their bills on time and seek to cultivate .1 long-term business relation¬ 
ship with you. 

Many clients fall short of this ideal. At the extiemes. some clients may want as little involve 
ment with you and your I their! 1 project as possible, while others may want to micromanage 
your every move. Some are incredibly demanding of sour time, while others won't even return 
your telephone callv Some require you to .vend them incredibly detailed specifications; while 
others refuse to read a single document sou send them. 

Succeeding in business means finding a way to do high-quality work under circumstances that 
are sometimes beyond your control. The key is to communicate your position clearly and 
directly, while keeping your emotions in check. 

Tabic 14-1 shows some examples of types of clients you may work with and some of the 
advantages and disadvantages to working with them. It also includes strategies for keeping the 
project and relationship on track. 

Recognita That Your Client Has the Upper Hand 

There are examples of individuals or companies whose services are in such demand that they 
choose the clients and projects they wish to work on. Usually, though, vendors are hungrv for 
work, so clients maintain the upper hand. If the client perceives that the sender did not per 
form svell on a project- because of the quality of work, the cost, the relationship, or any other 
reason, the client nearly always has the option to choose a different vendor next time. And 
vendors ui search of work are easy to find. 

Treat your clients with respect. You may be the interface design expert or the Web develop¬ 
ment expert, but it is still the client's protect. Choose your battles carefully. When inevitable 
differences of opinion occur, ask yourself if this is the hill you wish to die on. In other words, 
is insisting on your point of view important enough to risk alienating the client or damaging 
the relationship? In most cases, the answer will he “no" Recognize that you cannot always pro¬ 
tect clients from their own decisions, even when you are sure thev are wrong. 

Although vour clients mav call the shots, there are two must-haves that will help ensure the 
success of the projects sou work on. First, insist that vour client designates a single person to 
serve as your contact point throughout the project. All correspondence from and to the client 
should go through this person. Designate a single person on your end for vour client to work 
with, as well. There is nothing worse than getting conflicting direction from different sources 
and having to determine which path you should follow. 
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Strategies for Handling Sol uc ted Clionl Situations 


CLIENT SITUATION 

KEY ADVANTAGES 

KEY DISADVANTAGES 

STRATEGY 

The client msists on 
helping you design the 
protect 

Working closely with the 
client may help build a 
solid business relationship. 
The client may be more 
hkefy to be satisfied with 
the end product if site had 
a strong hand in creating 
it 

Heavy client involvement 
m8y increase your time 
and costs. The client may 
constantly second-guess 
your decisions 

If necessary, address thrs 
gently with the client 

Stress that to meet budget 
and schedule goals, the 
client's role is to review 
work and specify revisions 
at key milestones 

The client cen t be 
bothered with reviews or 
project details She |ust 
wants to see the finished 
product 

The design process will go 
smoothly and quickly with 
few interruptions 

You rnay be forced to make 
decisions that the client 
should be making Tbs 
cliont may blame you if the 
finished product isn't what 
she expected, regardless 
ol whether she commu¬ 
nicated her needs to you. 

Stress that to ensure that 
the end pioduct is suc¬ 
cessful it is important that 
she review and comment 
on milestones Sliest that 
you wil do whatever you 
can to make this an easy 
process lor her. 

The client uses an outside 
consultant or group of 
consultants to manage the 
protect including 
reviewing your wort 

The quality of the review 
feedback may be higher 
than if the client handles 
this herself. The consultant 
coutd be a source of leads 
or work in the future. 

The consultant may have 
incentive to increase his 
own hours land thus his 
payl or perceived value to 
the client by finding many 
things 'wrong" with your 
work 

If you discover this early 
enough, specify a fair 
number of revision passes 
(for example. 31 after 
which you will charge for 
additional passes Stress 
the need to contam costs 
and keep the project on 
schedule. 

Someone at the client srte 
{other than your usual 
contact) seems 
disappointed that you were 
selected to do the project 

He constantly finds fault 
with your work and makes 
things difficult for you. 

Sometimes the presence 
of a critical influence 
encourages us to do ou* 
best work 

An adversaria* business 
relationship can be 
emotionally difficult It abo 
costs time and money to 
defend yourself or your 
company from unjust 
criticism. 

Acknowledge to your usual 
contact that you tear that 
this person may not want 
you to succeed, but stay 
focused on doing the |ob 
you were hired to do Take 
advantage of opportunities 
to build support among the 
other members of the 
client team 
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Second, insist that all client feedback, such as ijiulitv assurance 
reviews, lx* cniuolidtited into a single report ami sent to you at 
oik* time. Otherwise, you vs ill be forced to revolve conflicting 
feedback from different sources. For example, two reviewers 
mav each want vou to change a button Ubd, but each may sug¬ 
gest different text. Which reviewer's suggestion should you follow' 

clients may also want to "flow ” the feedback lo you, but this is likely 
10 result in extra work. You mav make a change in response to an early 
review item, iust to have a Later review cancel or change the first item. 

Keqtiesting that feedback reviews be consolidated into a single report 
with duplicate items removed and conflicting items resolved will 
save you and your client time and money. Most clients will 
understand the reasoning behind tins rct|ucsl, although 
it may take some a while to get used to the practice. 

Finally, recognize that clients nearly always act in their own 
best interests, not in yours. 1 heir goal is to do the best they can 

tor their company while looking good in their management's eves. This will sometimes result 
in decisions that mav affect you adversely Some take such actions personally, believing that 
the client is acting intentionally to cause them harm. This is usually not the case 



The best approach in such situations is to make carefully measured responses. Although it 
may seem warranted at the time, dashing off an angry e-mail or racing to call a client to 
express your displeasure rarelv helps your cause. It could even result in you or your company 
being blackballed front working with that client m the future. Fake time to cool off, and then 
think logically about the best way to proceed. In many cases you will find that a misunder¬ 
standing lies at the core of the issue. 


A Vendor Learns a Costly Lesson 


Here is a real-life example of a small company whose greed cost them dearly Their story serves as a warning 
that situations are not always as w« perceive them. 

While working for a large corporation, I was asked to design and manage the development of a large senes of 
interactive multimedia sates training programs My respons»bilrties included hiring outside development compa¬ 
nies to produce the 15 programs that comprised the senes 

There was one small company in particular whose work was ol good quality, and we hired them to produce two 
of the initial titles After successfully completing these two titles, we put out requests tor proposal (RFPs) for the 
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A Vendor Learns a Costly Lesson (continued) 


next two protects in the series We were surprised to find tfiel this company's price was suddenly much higher 
than their original bids, although the projects were of similar scope and complexity The company's price was 
also significantly higher than that of the competing groups who responded. 


I thought there was a chance that they had made an error or misunderstood the project's scope, and I felt that 
I owed them the opportunity to review their numbers and resubmit When I contacted them to extend this offer, 
they responded that there was no error, and that their bid was firm 


We had no choice but to award these projects to other vendors, whose work was also of high quality Within a 
matter of weeks, the original company let go its entire multimedia development staff and closed down this part 
of its operations There was almost certainly a connection to our selecting other vendors, but what had caused 
such an abrupt closure 7 It wasn't until some months later that I found out what had led to this company's odd 
behavior and subsequent demise. 

In a conversation with one of the developers who had lost his job. I found out that the company's managers 
believed that doing a good job on the first two titles would greatly increase their leverage with us In fact, they 
were betting that we would select their company even if their price was higher than that of competing vendors. 
They had interpreted my call to them as simply an effort on my pan to get them to lower their price, but they did 
not believe we would risk selecting another vendor 

In fact, the managers had bet their company's very survival on their interpretation of the situation Although we 
had no way to know this, the loss of these projects meant that they could no longer meet their payrofl obliga¬ 
tions. and they were forced into insolvency The company's managers misjudged the strength of their position 
and foolishly wagered their company's future. 

There is also another angle to consider in this story Clients have a moral obligation to maintain a “level playing 
field' for the projects they b«d out This means simply that they should not give one gioup an unfair advantage 
over others U S. government agencies enforce strict rules to support this policy 

Working for a nongovernment corporation. I wasn't bound by such rules, although I believe strongly »n being fair 
to vendors For example, we never sent our RFPs to more than five vendors Having been a vendor as well as a 
client. I know how disappointing it is to wort diligently on a large proposal for a client only to find out that you 
are one of 12 competitors Such a large held greatly reduces your chances of winning 

By informing the company that their bids were inconsistent with the others', did I give tins company an unfair 
advantage 7 At the time I told myself that my decision to can them did not result in their winning the business 
The fact that my company d'd not force mo to choose the lowest bidder also helped me justify calling them. 

In truth, my calling the company gave them an opportunity to win a bid they otherwise would have lost outright 
I doubt the other companies bidding on the project would have felt that the playing held was level at that point 
It another group had also bid very high. I would have been obligated to give them the same opportunity to review 
their bid and submit revised pncing. 
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GROWING YOUR BUSINESS 

IVsigncrs who work as paid consultants or contractors serve as their own salespeople. 
Working feverishly to complete one project while simultaneously selling the next one is a dif¬ 
ficult part of this business, for this reason, mans designers prefer to work full time for a com¬ 
pany if such work is available. An employer is likely to pay a proportion of health care expens¬ 
es and often offers ocher benefits as well. 

Mans designers who work as consultants hope that a full-time position will emerge from a 
consulting assignment. There are others, however, who prefer being on their own, either by 
working as a consultant or bv forming their own company. 

For such people, generating sales is one of the most important parts of growing your business. 
A capable sales person helps find out about new opportunities within existing clients and with 
new clients. A capable sales person often serves as a client relationship manager, helping to 
resolve client problems. 

Some clients may perceive it as an advantage to deal with you directly, without working with 
a sales representative. If you absolutely despise sales, however, or if you are not good at it, then 
consider teaming up with someone who is. For without sales, there is no business. 


Finding Work 

When you are working with a client, don’t he afraid to ask what new projects are coming up 
for which you might submit a proposal. It is wise to time this request around a positive event 
in the project, such as an on-time, wdl-reccived deliverable. If your client is a large company, 
ask your contact for the names of others within the company who vend out proiects and ask 
if you can use your contact as a relerence. 

Remember that contacting a client isn't bothering them. You have something of value to offer. 
Ask your contact if it is all right for you to touch base once a month or so to keep abreast of 
new opportunities. 

When you are pust starting out, you may have to undercharge for your work to secure busi¬ 
ness. Let prospective clients know that you are eager to establish yourself and are willing to 
produce excellent work at a low rate m exchange for experience. Don’t overlook opportunities 
to do free or reduced-price work for relatives or friends in exchange for the right to list them 
as clients. 

Your best weapon in securing new work is to leverage your successes. When vou successfully com¬ 
plete a project, lie prepared to tell the storv of I vow the project succeeded. Metrics can be espe 
cwly useful in this regard. If you are able to say, for example, that you dropped customer com¬ 
plaints bv 25% or increased sales by 30%, these can be powerful messages to a prospective client. 
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l.ook for creative wavs to market your skills and services. Consider approaching a firm that 
specializes in large projects to see if they might he willing to pass on smaller jobs to you. You 
might also develop a referral arrangement with a company in a related field, such as video pro¬ 
duction or animation. They agree to recommend you to clients of theirs who seek interactive 
design work, while you recommend them to clients of yours who need their services. You can 
also each increase the breadth of services you offer by including your partners’ services as part 
of vour own. 

l)o vour best to build a base of different clients. Many companies do most of their work for a 
single client. A management change or key contact leaving can leave yourself or your compa¬ 
ny with very little business without any warning. Find at least a few different baskets in which 
to carry your eggs. 


Exercise Fiscal Responsibility 

During the boom that preceded the dot¬ 
com bust, mam young companies rented 
lavish offices and squandered investment 
money on expensive furniture and equip¬ 
ment, Don't make the same mistake. Run 
vour business as modestly as possible, and 
let sales drive your company’s growth. 
Avoid hiring permanent staff or purchas¬ 
ing equipment except when absolutely 
necessary. 
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Track your time as you work on projects 

to determine if your business is profitable. Tracking will teach you which types of projects and 
clients are most and least profitable. It will help teach you where your highest costs arc so that 
you can tTy to reduce them without sacrificing the quality of vour work. 


Writing Proposals 

Most designers and design companies win protects by writing proposals in response to client 
requests for proposal RFPxi. The RFP, which states the client's requirements, may be loose¬ 
ly' or well specified. Observe the RFP format and use as much of that format as possible when 
creating your proposal. If the RFP requests specific information, such as “include a section 
describing the staff you expect to use on the project.** then be sure to include this information 
in your proposal. 

If possible, try to set up a meeting with the clicni to discuss your questions and present your 
ow n work. Some clients will ask instead that you send yxuir questions via e-mail. 
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Components of the Proposal 

The proposals you create will be tailored to the client’s Rf P. In general, consider including the 
following in your proposals: 

• Introduction: A restatement of the propcct that demonstrates your understanding of the 
client’s needs. 

• Your solution: How you intend to satisfy the needs of the project, including innovative 
ideas you might have. 

• Hardware/sotiware: If this project includes development as well as design, then this sec* 
tion includes the hardware and software required to run vour solution. It may also include 
the languages or took you use to create the system. 

• Methodologies: This section includes any processes or methodologies you intend to use to 
satisfy the needs of the project. If methodologies arc central to the client’s RFP, then include 
them here. Otherwise, consider including them in the appendix. 

• Staff: Include the credentials and experience of those who will work on the project. 

• Applicable project experience: Include descriptions and/or screens from the projects 
you’ve worked on that arc similar or whose experience is applicable to this project. 

• Price: For fixed-bid protects, this is the price you are asking to perform the work specified 
in vour proposal. Provide a detailed breakdown of costs if the client requests this. When 
determining your price, be sure to add the coat of travel to and from the client site. If the 
client will be responsible for paying any license fees for products that you use. such as 
installers, be sure to include this information in the proposal and/or contract. 

• Schedule: Include a schedule that clearly shows both vour and the client's responsibilitics- 
The schedule should include a note speak ing that late deliveries bv the client will result in 
a delay of the same number of days. 

• Authorization: Include an unsigned authou/ation to begin work. Your attorney can pro¬ 
vide you with the language for the authorization. 

• Appendices: Include your company history, design philosophy, other samples of your 
work, or other information that vou think might help you to win the project. 

EXECUTIVE SUMMARY Consider including an executive summary at the beginning of vour 
proposal. The executive summary is a one-page synopsis of your bid. including key informa¬ 
tion needed by decision-makers on the client side. It should include a brief summary of your 
solution, the price, and the expected completion date. 

CONCEPT SCREENS Sometimes you have to give a little to win a lot. Clients love to have some 
thing to look at that helps evaluate vour skills. Sample concept screens or a prototype program 
help demonstrate your talent and commitment to the project and may excite your client 
enough to choose you. 
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Protect Yourself from Unethical Client Practices 

Although most clients deal fairlv and honestly, there arc those who will 
take unfair advantage of you if you give them the opportunity. Il is your 
iob to watch out tor such behaviors. I have personally experienced or 
witnessed all of the following unethical client behaviors: 

• Some companies issue seemingly legitimate RI : Ps requesting propos¬ 
als troni different groups, but later change their mind and decide to 
build the project in-house. The completed protect includes the best 
ideas "borrowed" from the submitted proposals. 

• A fairly common practice is for companies to require three or more 
competing bids on a project. Some companies ask you to hid just so 
they can meet tlm requirement, although they have no intention of 
awarding you the project. 

• Some companies don’t require all proposals to be received at the 
same time and may share your proposal with the company they want 
to win the project. 

• Sometimes favored bidders are invited to present their proposals in 
person, while the remaining vendors are asked to mail their proposals. 

• Some companies hire you with no intention of ever paying you for 
your work. Sometimes the client company ceases to exist, but quick 
ly reappears with the same owners under a different name. 



Ask a prospective client if she is 
willing to give you a "ballpark" 
price range she is looking for. 
You might say that you can 
respond to the client s RFP with a 
very modest solution or with a 
more elaborate one. and you 
want to ensure you are mooting 
the client's needs Many compa¬ 
nies will candidly respond to this 
question. They might give you an 
expected range of values. This 
ensures that your bid is basically 
in line with their expectations 
and won't be rejected because it 
is far too high or even too low 


The best way to protect yourself from such practices is by including protective language in 
vour contracts and by asking questions up front, before you begin creating a proposal. The fol¬ 
lowing questions may help root out situations that you want to avoid. They can also hdp 
determine which RFPs you choose to respond to and how much effort to put into your 
response. It is important that you assume clients are dealing ethically with vendors and that 
you not come across as distrustful. Before asking any questions of a prospective client, he sure 
to review the RFP and any other documents or materials the client has sent to see if they pro¬ 
vide any of these answers. 

• I low many bidders are being asked to submit proposals"' 

• Are the proposals due from all vendors at the same time? 

» Is there a vendor who is bidding on the project who worked on an earlier version of this 
product? 

• Are vendors being asked to submit lixed-price bids or hourly rates (time and materials) for 
the work? 

• Is there any chance that the project will not be awardesl to any of the bidders? 

• Who at the client company will decide which company is awarded the project? 
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• W'lut arc the most important criteria for determining which competitor wins the project? 

• Will you have the opportunity to ask questions to clarify the client’s needs prior to sub¬ 
mitting your proposal? 

• Will you or any other bidders have the opportunity to present sour proposal in person? 

The answers to these questions should help you decide whether to create a proposal or pass 
on the opportunity. If you believe your chances to win arc small, you might decide to respond 
with a brief proposal that does not require much time or effort to create. If the client is a desir¬ 
able one to sou, you may decide to respond with a high-quaJitv proposal iust to ensure that 
sou remain on the list of vendors who are sent RFPs in the future. 


The Winning Bidder 

I he w inning bidder is usually the person or company who offers the best combination of the 
following: 

• Price 

• A creative solution 

• An individual or company that is easy, fun, or prestigious to work with 

• Someone who can he trusted to complete the work within budget and schedule 

Sometimes there are other decision factors that a client may not disclose to vendors. For 
example, the client may prefer to work with someone who is local. Occasionally, someone who 
is high in the organization may express a preference for one of the bidders. In certain situa¬ 
tions. a project is awarded to a vendor to make up for a past injustice. 

If the client notifies you that you are the winning bidder, congratula¬ 
tions! The next step is to try to nail down the business as soon as pos¬ 
sible by getting the client to sign your authorization letter. 

You Can I Win Them All 

If you lose a hid, he sure to find out whv the client selected the win¬ 
ning bidder. Was price the issue, or was it the competitor's solution, or 
perhaps the client's comfort level with the other bidder? A client nor¬ 
mally feels bad for you when you lose and may be willing to share 
information. Don’t become defensive or negative, but wish the client 
success and use the opportunity to learn how to be a better bidder next 
time. 

your company. 


|TIP| 

On several occasions, our com¬ 
pany won a project we were told 
we lost by continuing negotia¬ 
tions with the client as if the prot¬ 
ect had not yet been awarded. 
Although such situations are rel¬ 
atively rare, it is possible that the 
client may be forced to go with a 
vendor due to price In such 
cases, it may be worth asking if 
your client might accept a lower 
price or additional leatures from 
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It Isn't Over Till It's Over 

Remember that the deal isn’t done until the contract is signed, and even 
then it isn’t done. The road is littered with companies whose leaders pre 
maturely celebrated a victory, only to find later that they actually lost or 
won much less than they thought. Sometimes your client contact will 
lead you to believe you are the favored vendor. It isn’t until after the 
project is awarded to someone else that you realize that your contact was 
not the decision maker. 

You may even win a project, begin work, but then be informed that the 
client has terminated the project for any number of reasons. You may 
have staffed up to handle the expected load only to be stuck with man¬ 
power and ci|uipmcnt you no longer need. To protect yourself in the 
event that a client cancels a project, include provisions in your contracts 
that specify that wu get paid for all work you have completed and any 
preparation work you have performed for subsequent phases of the 
project. 



Don't look at your client through 
rose-colored glasses Many ven¬ 
dors hear what they want to hear 
at client meetings or in conver¬ 
sations and fail to hear what the 
client is really saying. For many 
reasons, the client may not be 
willing to say something to you 
directly Try to read between the 
lines, challenge your assump¬ 
tions, and ask questions freely to 
get the true story. 


INSTITUTE AND FOLLOW 
PROVEN OFFICE PRACTICES 

This section contains some useful ideas to help your business run 
smoothly and efficiently. The ideas cover vetting up filing systems and 
handling communications. Some benefits of mstituting and following 
such systems include: 

• They maximize efficiency. It is frustrating and costly to lose impor 
tant documents or forget to bill for completed work. 

• They help ensure consistency and reliability' as the business grows. 

» When a client asks you to update a protect you worked on several 
years ago, it is helpful to be able to review the projects details by 
accessing its back file. 

• An efficiently run office can be an effective selling tool when you are 
trying to win new business. Clients like to deal with well-organized 
groups and individuals. It helps projects run smoothly and shows 
that you are serious about being in business. 



When considering implementing 
a new office procedure, ask 
yourself if the new procedure is 
too complex or requires too 
much maintenance to be sustain¬ 
able The procedures you set up 
should serve you. not force you 
to be a slave to them 
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hipj 

Orient protect documents such 
as memos and letters so that the 
left edge, which usually contains 
the document date, is facing up 
This will enable you to quickly 
thumb through the documents to 
find documents of a specific date 
without having to remove the 
documents from then files 


| TIP 


It is much easier to locate a par* 
ticular hanging file il all of the file 
labels are m a single line. This 
enables your eye to quickly scan 
the labels. Figure 14-1 illustrates 
this point. 


14-1 


bmny up hanging tile labels 
mates tbvm «asy to scan jnd find 
H specific file 


Filing 

Although filing ranks among the more mundane office tasks, setting up 
and maintaining an efficient filing system pays substantial rewards over 
time. In fact, being able to quickly locate a much needed document can 
be downright exciting! 

Create separate file drawcis for protects, companies you deal with, per¬ 
sonnel, and any other categories that lit your business. Your protect files 
will likelv expand to multiple drawers with time, lo create a protect file, 
purchase box-bottom hanging files and place brown accordion file 
pockets inside them. This will provide room to store many documents. 
For large projects, when the accordion file gets filled to capacity, simply 
add a new box-bottom hanging file and accordion file and continue 
storing. 

Create a file for each new project you work on, and arrange them alpha¬ 
betically by project name. Store all of the documents you send and 
receive for that project in date order. File the oldest documents in the 
back, and place newer documents in front. 

Create an electronic filing system that parallels your paper files. 
Organise your electronic project files by project name for storing e-mail 
messages. Some companies pnnt copies of all e-mail messages sent and 
received and store these hard copies in the protect files. To save paper 
and to keep vour paper project files from growing too quickly, consider 
just printing key e-mail messages for the paper protect files, and storing 
all e-mail sent and received in the electronic files. 

Create a project file for storing a CP or DVD containing each piece of 
software vou send to a client or to contractors you arc working with on 










4 project. C learly label each CD with the date and identification of the 
software stored there. The CD or DVD should contain just those files 
that were sent to the client or contractor. litis can help you settle dis¬ 
putes should they arise regarding what was sent when. 

Create a separate tile for storing any software the client sends you. If 
software is sent electronically, burn it to a CD or DVD and label and 
store it in this tile. Buy a date stamp and stamp any undated materials 
you receive with today’s date. 


Communications 

During the course of a protect, there are dozens of communications that 
occur between you, your client, and other participants. Here are some 
guidelines that may help you manage the communications among the 
parties. 

Try to set up a face-to-face meeting for holding the most important con 
venations, such as a protect kickoff meeting. Much meetings usually take 
place at the client's site. Clients understand that individual contractors 
often work out of their homes and so are happv to hold meetings at the 
client’s site. 

A vendor who maintains offices may invite the client to meet at the ven¬ 
dor's site, especially if the client is a new one. This allows the vendor to 
show off her operation and introduce key staff that may he working on 
the project. This helps give the client a feeling of confidence and helps 
establish the relationship. 

He sure to follow up important meetings and telephone conversations 
with an e-mail message that summarizes any decisions that were made 
and action items that were assigned. E-mail is an effective means of 
communication because the text is searchable, allowing you to find ref¬ 
erences to a particular topic if the need arises. 

When you send a deliverable through the mail, include a cover letter that 
indicates what is being included and the date that the client’s review of 
the material is due according to the most recent project schedule. This 
will alert the client to expected deliverables on their part and will help 
cover vou in the event that the client is late with expected deliverables. 

Keep all correspondence—letters, memos, and c-mails hr lef and to the 
point. After a friendly greeting, state Lite purpose of the correspondence 
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Consider maintaining offsite stor¬ 
age for your most important doc¬ 
uments and media. If you are not 
sure what to store offsite, imag¬ 
ine a fire destroyed your office. 
What would it be hardest to 
replace? 


I TIP | 

Consider maintaining a loose- 
leaf binder for each of your proj¬ 
ects. The binder organizes all of 
the important protect documents, 
including the RFP. proposal, fea¬ 
ture lists, wireframes, and meet 
ing notes. Whenever you attend 
a project meeting, just bring the 
project binder arid you have 
access to all of the documents 
you might need. 
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right away. Write as it your reader has very little time to read your writing, and use some of 
the concise writing techniques discussed in Chapter 10. 


Create a Company Routing Slip to Organize Mail 

If you are part of a company, create a company routing slip to help you organize and keep a 
record of incoming and outgoing hard copy mail, figure 14-2 shows an example of a routing 
slip. 

Attach a completed routing slip to your office copy of each document you send or receive. 
Include the name ol the document's sender, the date, proiect name, and a brief description of 
the contents. Check off who vou wish to receive a copy of the document and. for outgoing 
documents, who it is being sent to and by what means (overnight mail. fax. etc.). Be sure to 
include the appropriate project file as one of the recipients. 


14-2 


Attach 4 routing v*»p to incoming moil and copies of outgoing mail This creates to effective record of *fto 
received a particular mail dam Do not send mo routing slip to clients or others outside your company. Out include 
<t in any copies you distribute to your cowotkers 



Routing Slip 


Date 


Sent by. 

Descriptor* 

r Bot> Raymond 

r Karen Gray 

r 

. Bcme Hal 

r Lorenzo Thomas 

c 

r ernes vwong 

r Monte > cc*ig 

r 

Frod Schuttr 

I PaaaPodnguez 

r 

r Georgia Wstace 

r SalyThom at 

r 

J Pivoia 

r Tory Ames 

r 
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SUMMARY OF KEY POINTS 

• Learn to serve your clients while protecting your own interests. 

• Your client's style can determine the ease or difficulty of the relationship, the protect’s prof¬ 
itability to you. and its ultimate success or failure. You can adopt strategies to help keep the 
protect and relationship on course 

• Take time to cool down and plan an appropriate response when a client’s action affects you 
adversely. Don’t misconstrue a business decision as a personal attack. 

• Remember that clients usually can find someone else to perform work for them The more well 
known the client, the more options they generally have 

• Grow your business by leveraging your successes. Develop several clients, so that a change in 
situation at one client doesn't leave you without business. 

• Strive to develop marketing arrangements with other providers to help ensure a continuous 
flow of work 

• Exercise fiscal responsibility. Don't worry about creating the appearance of success; just do 
what it takes to create real success. 

• Ask questions of a potential client to qualify an opportunity, determine if you intend to bid on it, 
and determine the amount of effort to put into your bid 

• Set up and maintain a dependable filing system that reflects and accommodates your need to 
retrieve information. Oevise and incorporate new systems as necessary to streamline your 
operations. 
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in review 


What question should you ask a client who has set an unrealistically aggressive 
deadline tor a protect? 

What strategy should you employ to deal with a client who can't be bothered 
with reviews or protect details? 

3 What does the question. ‘Is this the hil I wish to die on?" have to do with client 
relationships’ 

4 . Why is it important to insist that the client designate a single person to serve as 
your contact on a protect’ 

What are some things a vendor should do to ensure that all bidders are compet¬ 
ing on a level playing field’ 

What is an executive summary and why should you include one m your 
proposals’ 

What factors, in addition to price, help determine which bidder a client chooses 
as the winner? 

8. Why is it important to set up and maintain efficient filing systems? 


exercises 


In this chapter we described how organization is key to running a successful 
business We examined some simple, useful organization ideas, such as filing 
protect documents m expandable hanging folders and creating a company rout¬ 
ing slip to keep a record of incoming and outgoing hardcopy documents Use 
the Web to find et least three othei good ideas that your business could use to 
get and stay organized 

Keeping in mind the various types of clients that you may encounter, create a 
one-page handout to give to new clients that illustrates or describes how the 
client can work most effectively with you. You can use lustrations, diagrams, a 
table, text or any other visual means to get your point across 
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above the fold: the area of a Web page that can 
be seen without vertically scrolling the page. The 
area above the fold should contain the most 
important content. 

active voice: method of constructing a sentence 
in which the one performing the action is the 
subject of the sentence. Active voice is preferable 
to passive voice for most types of writing 

adopt and adapt technique: an idea generation 
technique that looks to other fields for related 
problems and their solutions. 

affordance: the function of an object. An object’s 
perceived affordance is based on our cultural 
understanding of that object. 

agile software development: methodologies 
which use a repeating (iterative) approach, where 
a series of prototypes are designed, developed, 
tested, and integrated into the software. 

alpha release: an early version of a software sys¬ 
tem that includes partial functionality. 

alt tag (also called alternative text tag): an 
HTML tag that is used to provide a description 
of an image. A screen reader reads the content ol 
the alt tag, enabling blind and low-vision users 
to understand the purpose of the image. 
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application: a software program designed 
lor a specific purpose or function. 

assessment lest: a usability test that helps 
determine how well features have been 
implemented in a design. 

assistive technologies: hardware and soft¬ 
ware devices that help make websites and 
software accessible to those with disabilities. 

audibility: the ease with which users can 
locate desired functions in a sound-only 
application. 

below the fold: the area of a Web page that 
cannot be seen without vertically scrolling 
the page. The area below the fold usually 
i ik IikIcs content of lesser importance than 
that appearing above the fold. 

beta release: a version of a software system 
that includes partial or full functionality but 
has not yet been fully tested. 

breadcrumb trail: a horizontally oriented 
list of text links that repiesents the path 
taken through the pages of a website to get 
to the currently displaced page. 

break the rules technique: an idea genera¬ 
tion technique in which the least likelv solu¬ 
tions to a problem are encouraged and 
explored. 

callout: a text box with a directional line 
that calls attention and provides informa 
tion specific to a particular screen element 
or component. 

cascading menus (also called netted menu* 

or hierarchical menus): a type of menu in 
which multiple menu levels are shown on 
the same screen or page. 


cascading style sheets (CSS): collections of 
instructions that specify display elements 
such as fonts, font sizes, font colors, back¬ 
ground colors, and images to a Web browser. 

check box: a small labeled square that is 
clicked to indicate that a particular option is 
turned off or on. 

combo box: a list box control that consists 
of a text box and a single-selection list box. 
The user can either select an item from the 
list or tvpe the name of an item to select it. 

command buttons (also called pushbut * 

tonsh a control containing a text and/or 
icon label that the user clicks to invoke the 
corresponding function. 

comparison test: a usability test that com¬ 
pares two widely different approaches to a 
design. 

computer-human interaction (CHI): a dis¬ 
cipline concerned w ith the design, evalua¬ 
tion. and implementation of interactive 
computing systems for human use and with 
the study of maior phenomena surrounding 
them. 

concept drawings (also called concept 

screensh graphically rendered screens that 
show how a Web page or software screen 
will look. 

consistency: a design principle that 
describes doing similar things in a similar 
way to promote familiaritv with a system. 

contextual inquiry: a method of learning 
about audience needs by observ mg workers 
and asking questions within the context of 
the tasks being performed. 
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disjoint: disconnected or scattered, as in a 
disjoint group of entries. 

down state: a state of a pushbutton that is 
displayed when the user is clicking the push* 
button. 

drop-down combo box: a list box control 
that the user clicks to display its entries. 
Once the entries are displayed, the user can 
select from the list or type the name of an 
item to select it. 

drop-down list box: a list box control that 
only displays the selected choice until the 
box is opened by clicking, revealing the 
choices in the list. 

edit control (also called a text box): a con¬ 
trol for displaying text that the user can 
select for cops mg or pasting to another loca¬ 
tion. 

effectiveness: the accuracy and complete¬ 
ness with which specified users can achieve 
specified goals in particular environments. 

efficiency: the resources expended in rela¬ 
tion to the accuracy' and completeness of 
goals achieved. 

equivalent alternative: an alternate means 
of presenting the content of a site or soft¬ 
ware to make it accessible to those with dis¬ 
abilities. 

essential use case: a method of recording 
user intentions and system responses used as 
part of task analysis. 

ethnography: studying the habits of a group 
of people by living among them. In user 
analysis, observing people while they per¬ 
form their jobs to gain insights applicable to 
the design of a website or software system. 


evaluation test: an assessment usability test 
that is performed after a website or software 
has been released and is in use. 

exploratory test: a usability test that is per¬ 
formed early in the design phase that checks 
user reactions to the functions planned for a 
website or software system. 

extended-selection list box: a list box con¬ 
trol that enables the user to select a single 
entry, a continuous block of entries, or a 
disjoint group of entries. Multiple entries 
are selected by pressing a combination of 
keys while clicking with the mouse. 

facilitator (also called the monitor or test 
administrator): the person who serves as the 
host of a usability test. 

feature creep: the tendency of a software 
program to become laden with features over 
time, sacrificing usability. 

feedback: information that a system pro¬ 
vides to a user that indicates the status of his 
or her action. 

Fitts’ I .aw: a law stating that the time it takes 
a human to reach a target depends on the 
distance and size of that target. It takes 
humans longer to reach targets that are 
small and farther away from the current 
position. 

flowchart: a visual representation that uses 
special symbols connected by arrows to 
illustrate the steps and flow of a process. 

flow diagram: a visual representation of a 
website or software system that uses rectan¬ 
gles and lines to show the system’s structure 
and key screens at a glance. 
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forgiveness: a design principle that 
describes systems that enable users to easily 
recover from mistakes or unintended 
actions. 

functional prototype: an example of a web¬ 
site or software program that includes some 
functionality. 

functional specifications: a document that 
includes schematic images and detailed 
descriptions of the effects of activating any 
control. 

glow: a highlighting effect that is displayed 
when the user rolls the mouse cursor over 
an dement such as a button. 

glow state (also called the highlighted 

state): a pushbutton state in which glow is 
displaced when the mouse cursor is within 
the pushbuttons boundaries. 

gold master (also called the production 
master >: the final, tested version of a soft¬ 
ware system. 

group brainstorming: an idea generation 
technique that uses a group of people to 
generate spontaneous ideas to solve a partic¬ 
ular problem. 

heading: a subtitle that introduces a content 
area of a Web page. Headings make it easy 
for users to scan a page’s content. 

heuristic: a rule of thumb or guideline. 

hierarchical menus (also called cascading 
menus or nested menus): a type of menu in 
which multiple menu levels arc shown on 
the same screen or page. 

highlighted state (also called th cglow 

state): a pushbutton stale in which glow is 


displayed when the mouse cursor is within 
the pushbuttons boundaries. 

human-computer interaction (HO): a dis¬ 
cipline concerned with the design, evalua¬ 
tion. and implementation of interactive 
computing systems for human use and with 
the study of maior phenomena surrounding 
them. 

hyperlinks: short sections of underlined text 
that the user clicks to display a new page, 
text section, image, or other element. 

hypertext: a system of linking documents, 
images, and other elements together on the 
Web. 

icons: symbolic pictures used to convey 
meaning. 

image map: a graphic with a number of 
active areas that the user can click individu¬ 
ally. 

inactive state (also called the unavailable 

state): a pushbutton state in which the con¬ 
trast of the button is lowered to make it look 
dim. This indicates that the pushbutton is 
unavailable for clicking. 

incubate technique: an idea generation 
technique in which people set their mind to 
a task, then wait until a solution emerges. 

information architect: a worker who spe¬ 
cializes in the organization and design of a 
software application. 

instructional designer: a worker who spe¬ 
cializes m the design of systems for teaching 
or training. 

interface: the means by which hunians 
interact with a computer to fulfill a purpose. 
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intranet: a private network within an organ¬ 
ization that enables employees to share com 
pany information and resources. 

inverted L: a method of arranging Web 
pages in which the main content menu is 
aligned horizontally along the top of the 
page and the selected category’s menu is dis¬ 
played along the left side, forming an invert¬ 
ed L shape. 

inverted pyramid: a method of structuring 
writing in which the most important idea is 
presented first, then supporting details are 
given. Web content is best written using the 
inverted pyramid structure. 

lateral thinking: the process of developing 
new approaches by changing perspective. 

Likert scale: a scale that enables users to 
indicate the degree of agreement or dis¬ 
agreement with a presented concept or 
statement. 

list box: a control that presents a list of 
related options to the user. 

logging sheet: a form used to record the 
participant's results in each task of a usabili¬ 
ty test. 

low vision: subnormal vision affecting 
approximately 3.5% of the U.S. population. 
Low vision ranges from loss ol some vision 
to near-total blindness. 

mapping: the relationship between a con¬ 
trol, the thing it affects, and the outcome 
that results when the control is operated. 

menu: a list of choices in an application. 

menu bar: a usually horizontally-oriented 
list of menu titles in an application. 


menu items: a list of selectable items, con 
sistingof text and sometimes icons, that are 
displayed beneath a menu title. 

menu titles: the top-level names (c.g., File, 
Edit. Help I that appear on a menu bar. 

metaphor: a familiar image used to make an 
unfamiliar idea, experience, or process 
understandable. 

mind mapping: a technique for capturing 
and organizing ideas using combinations of 
fishbone-like lines, text, and doodles. 

minimalism: a deliberate reduction in com¬ 
plexity for the user's benefit. 

modal dialog: a box containing controls that 
prevents the user from selecting or activat¬ 
ing any other controls except those within 
the box. 

monitor (also called the facilitator or test 
administrator ): the person who serves as the 
host of a usability test 

multiple-selection list box: a control that 
consists of a group of cheek boxes within a 
list box. It provides an intuitive means of 
allowing users to sdect multiple entries in 
the list. 

natural mapping: a strong, positive associa¬ 
tion between a control and the resulting 
action. 

nested menus (also called cascading menus 
or hierarchical menus): a type of menu in 
which multiple menu levels are shown on 
the same screen or page. 

no constraints technique: an idea genera 
lion technique in which all constraints arc 
purposely ignored. 
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normal state: ihc wav a pushbutton is dis¬ 
played normally, when it is available but not 
being pointed to or clicked. 

observer someone who watches a usability 
test, but who does not have a substantial 
role in conducting the test. 

option button (also called a radio button j: 

a small circular button, usually labeled and 
displayed in groups. Clicking one of the but¬ 
tons m the group desclectv the currently 
selected button. 

orientation script: a document that is read 
to each participant of a usability test to 
ensure that all participants are given the 
same set of instructions. 

outline control (also called a free control): a 

control that organizes its elements in an 
outline format. 

page title: text that summarizes the main 
purpose of a Web page. 

participant: the person who serves as the 
subject of a usability test. 

passive voice: method of constructing a sen¬ 
tence in which the receiver of the action is 
the subject of the sentence. Passive voice 
invites ambiguity, which weakens writing. 
Active voice is preferable to passive voice for 
most types of writing. 

persona: imaginary people that designers 
create to represent the various user types of 
a website or software system. 

post -test questionnaire: a series of ques¬ 
tions that give a usability test participant an 
opportunity to provide conclusions and rec¬ 
ommendations about the product being 

tested. 


product gallery: a technique of grouping 
images and descriptions of products offered 
for sale on a Web page. 

production master (also called the gold 

master): the final, tested version of a soft¬ 
ware system. 

proposal: a document created by a vendor 
to try to win business from a client. 

prototype: a partial implementation of a 
software system or website. 

pushbuttons (also called command 

buttons): a control containing a text and/or 
icon label that the user clicks to invoke the 
corresponding function. 

pyramid structure: a method of structuring 
wTiting in which a series of ideas is present 
ed leading to a conclusion. Essays arc often 
written using a pyramid structure. 

radio button (also called an option button): 

a small circular button, usually labeled and 
displayed in groups. Clicking one of the but¬ 
tons in the group deselects the currently 
selected button. 

random word technique: an idea generation 
technique in which a random word is 
applied to a problem to enable the mind to 
make connections and develop possible 
solutions. 

recorder: the person responsible for jotting 
down details of a usability test and often 
serving as timer. 

redundant text links: a set of text links that 
mimics the function of graphic-based 
menus, enabling blind and low vision users 
to nav igate the site. 
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refreshable braille display: a device that is 
used in combination with a screen reader to 
convert the screen reader's output to braille. 
This enables deaf-blind users to access web¬ 
sites and software. 

request for proposal (Rl P): a document 
that a client sends to potential vendors to 
solicit proposals for a project. 

reversal technique: an idea generation tech¬ 
nique in w-hich the problem is reversed. 

RFP lrequest for proposal): a document 
that a client sends to potential vendors to 
solicit proposals for a project. 

rich-text box: a control used for receiving 
user-provided text that can have special 
emphasis such as bolding, underline, and 
italics. 

sans serif typeface: a typeface such as Arial 
and Helvetica that docs not include tiny 
lines on the bases and tops of characters 
such as A, I, and M. 

satisfaction: the comfort and acceptability 
of the work system to its users and other 
people affected by its use. 

screen magnifier software that magnifies 
the screen image up to 16 times or more. 
Screen magnifiers often include other 
enhancement features, such as software- 
based screen readers. 

screen reader: software that converts the 
text on a Web page or software program to 
synthesized speech. 

screening questionnaire: a set of questions 
given to potential participants for a usability 
test to select candidates whose qualifications 
best match the requirements of the study. 


Section 508: a section of the Rehabilitation 
Act of 1973 that requires that electronic and 
information technology, including websites 
and software, that is developed, procured, 
maintained, or used by the federal govern¬ 
ment be accessible to people with disabili¬ 
ties. 

serif typeface: a typeface such as Times New 
Roman that includes tiny lines on the bases 
and tops of characters such as A, I, and M. 

shortcut key: a key sequence (such as Ctrl-S 
for Save) that can be invoked without the 
associated menu being displayed. 

single-selection list box: a list box control 
that enables the user to select a single entry. 

site/software map: a set of links that 
describes a large, complex site’s architecture. 

site/software outline: an outline that shows 
the structure of a website or software sys¬ 
tem. 

slider: a control that enables users to select 
one of a range of values by dragging an indi¬ 
cator along a usually horizontally or verti¬ 
cally oriented line. 

software/site outline: an outline that shows 
the structure of a website or software sys¬ 
tem. 

spin box: a control used to enable users to 
select one of a range of continuous values, 
such as a list of contiguous numbers. 

splatter vision (also called unfocused atten¬ 
tion ): the technique of looking with unfo¬ 
cused eyes to see an image or scene "all at 
once." Using this technique enables the 
viewer to quK'klv judge the contrast and 
focal points of a design. 
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static text field: a control used for display¬ 
ing noneditable, non-selectable text, such as 
that used for titles, labels, and instructions. 

story board: a set of sketches or illustrations 
that illustrates a specific sequence of steps, 
pages, or screens. 

style guide: a document that defines the 
style conventions that guide the design and 
development of software or websites. 

survey: an online or human-conducted 
series of questions designed to analyze user 
needs. 

systems development life cycle (SDLC): the 
process of analyzing, planning, designing, 
developing, and testing software using a 
step-by-step methodology. 

systems development method (SDM): 
process used to devdop software. 

tab control: a control that organizes pages 
of options or information of similar tvpc. 

tag line: a brief statement that summarizes a 
companv or organization. 

task: a specific function chat a user wants or 
needs to accomplish. 

task analysis: the process of breaking a 
process down into its component steps. 

test administrator (also called the monitor 
or facilitator ): the person who serves as the 
host of a usability test. 

text box (also called an edit control ): a con¬ 
trol for displaying text that the user can 
select for copying or pasting to another 
location. 


text field: one of several different controls 
used for displaying or allowing user input of 
text. 

tooltip: a small text box displayed when the 
user mils the mouse cursor over a specific 
text segment, control, or image that gives 
additional information about that item. 

tree control (also called an outline control ): 

a control that organizes its elements in an 
outline format. 

truncate: cut off. 

unavailable slate (also called the inactive 

state): a pushbutton state in which the con¬ 
trast of the button is lowered to make it look 
dim. This indicates that the pushbutton is 
unavailable for clicking. 

unfocused attention (also called splatter 

vision >: the technique of looking with unfo¬ 
cused eyes to see an image or scene “all at 
once." Using this technique enables the 
viewer to quickly judge the contrast and 
final points of a design 

usability: the effectiveness, efficiency, and 
satisfaction with which specified users 
achieve specified goals in particular environ¬ 
ments. 

usability engineers: a group of workers who 
conduct testing to help ensure that a prod¬ 
uct is usable to its intended audience. 

usability test: a test performed using human 
sublets that determines the ease or difficul¬ 
ty with which the subjects can complete 
given tasks using an existing or proposed 
design. 
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usability test plan: a document that sum¬ 
marizes the purpose, goals, audience, con¬ 
tent. and methodology’ for a usability test. 

user-centered design: the process and result 
of designing with the needs of the user in 
mind. 

user experience: all facets of the interaction 
belween a human and a company, its prod 
ucts. services, and systems. 

user interface: the means by which humans 
interact with a computer to fulfill a purpose, 

user stories: requirements captured in a 
user s own words used as input to the design 
process. 

videotape consent form: a tor in that a par 
ticipant in a usability test signs to give per¬ 
mission to videotape the test. 

virtual manipulative^ computerized repre¬ 
sentations of the manipulative*. such as 
number cubes, spinners, math mats, etc. that 
arc often used in schools. 

visibility: a design principle that describes 
the ease with which users can find the func¬ 
tions that a website or software system 
offers. 

W3C (World Wide W'eb Consortium): The 

Web's primary standards organization. 

Waterfall model: a step-by-step method for 
analyzing, planning, designing, developing, 
and testing software in which the process 
always flows forward. 

watermark: a faint graphic image that serves 
as a background for other elements on a 
page 


Web Content Accessibility Guidelines 

(WCAG): a set of guidelines published by 
the World Wide Web Consortium (W3C) to 
help designers and developer*, create accessi¬ 
ble websites. 

Web framework: a semi functional proto¬ 
type that is delivered in a Web browser. 

w bat/when/how: .1 technique used in 
instructional writing in which the writer 
first tells the audience what the procedure is, 
then tells when the audience might use it, 
and describes how the method or object is 
used. 

wireframes: schematic sketches that repre¬ 
sent the functional layout of a Web page or 
software screen. 

wizard: an interactive aid that guides a user 
through the completion of a complex task 
by presenting its steps one at a time. 

word wrap: the automatic breaking up of 
long lines at word boundaries, enabling 
users to continue typing without pressing 
the Enter key at the end of each line. 

Workforce Investment Act of 1998: act 

signed into law bv President Clinton that 
significantly expanded and strengthened the 
technology access requirements stated in 
Section 508. 

World Wide Web Consortium (W3C): the 
Web's primary standards organization. 

WYSIWYG: an acro n ym for “what you see is 
what you get.” 
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Sinclair, Michael, 2 

Single best solution, 94-95 

Single selection list box, 130, 130-131 

Site: 

maps, 159, 159 
outline, 68, 69 
visits, 72-73 
Slider. 134, 134 
Software, 8 9 

function of, 11-13 

Software based wireframes 264, 265-270 
Software design. 25. 44 
consistency in, 40-41 
dueling principles in, 43 
and Fitts' Law, 38-40 
forgiveness in, 41-42 
Miles/Kilometers Converter problem. 

2629 

minimalism in, 42-43 
user interface design principles, 29-38 
Software development, 49 
Agile methods, 52 53 
Repeating Waterfall model, 50-51 
Spiral model. 51-52 
Waterfall model. 49-50 

implementation stage. 60. 60 
integration and testing stage, 60-61, 
61 

project planning stage. 55. 56 
requirements definition stage, 56 57, 
57 

systems design stage, 57-59. 59 
Waterfall vs. Agile methods. 54 table 
Software Engineering: A Practitioner's 
Approach (Pressmanl, 51 
Software for Use (Lockwood & 
Constantine), 82 
Software outline. 68. 69 
Specifying the design See Design 
specification 
Spin box. 134. 134 
Spiral model. 51. 51-52 
Splatter vision, 195 
Static text fields. 128 
Storyboards. 273 274, 27 5 
Style guide. 41. 58 59. 279 
Sullivan, Louis, 29 
Survey, 72 

Systems design stage. 57-59, 59 
Systems development life cycle, 49 
Systems development methods, 49 
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Tables. 246, 246 
Tabs, 153 156. 154 155 

controls, 32, 32, 134 135. 135 
Tag line. 224 226, 226 
Target location, 39. 39 
Tasks, 78 

administrator, 81, 87-88 
analyzing. 78-87 
class. 88 
grouping, 87 90 
instructor. 80 81. 88 
list of. 289, 289 
student. 80, 88 
system, 81-82 
Terminology, 7-8 
Test environment, 290-292, 291 
Test plan. 288 293, 289. 291 
Text: 

contrast between typeface and back¬ 
ground. 203 204. 203 204 
left justification for multiple-line, 204 
205, 206 

Textboxes, 126-127, 127 
left-aligning, 198. 199 
rich. 127-128 

when to use and not use. 128 
Text-editing, 273 
Text fields. 126 
static, 128 

Text-only labels. 35. 35 
Thinkertoys (Michalko), 96 
3-D drawings. 261 
Tooltips, 143, 143 
Tree controls. 135. 135-136 
Truncate. 129 
Tufte, Edward, 43 
Typefaces. 202-203. 203 

U 

Unavailable stale, 122 
Unethical practices. 313-314 
Unexpanded menu. 31 
Unfocused attention, 195 
Usability, 9, 10 
Usability engineers. 9-10 
Usability tests. 283. 287 table, 300 
assessment test. 286 
basics of, 284 285 
comparison test. 287 
evaluation test, 286-287 
exploratory test. 285-286 
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Stage 1: Create test plan, 288-293. 289, 
291 

Stage 2: Select participants. 294 
Stage 3: Prepare tost materials, 284, 294 
296, 296 

Stage 4: Conduct test. 296 298. 297 
Stage 5: Debrief participant. 298, 299 
Stage 6: Convert results into recommen¬ 
dations. 298 300 
Usborne, Nick, 226 
User-centered design, 9-15 
User experience, 7 
User interface, 7, 8 
User interface controls. 136 
check boxes. 126, 126 
combo boxes. 132. 132-133 
libraries of, 271-272 
list boxes, 129-132, 129-132 
pushbuttons. 119-121. 119-123 
radio buttons. 123, 123-125 
sliders, 134, 134 
spin boxes. 134, 134 
tab controls, 134-135, 135 
text fields. 126 129, 127 
tree controls, 135, 135-136 
User interface design: 

audience requirements, 13-14 
costs of bad design, 15-21 
design principles, 14-15 
process of, 48 49 
software development, 49 54 
Waterfall model. 55 61 
User interface design business. 303. 319 
client relationships. 304 309. 307 table 
growing the business. 310-315 
office practices. 315-318, 316, 318 
Users. 79 80 

V 

Validation test, 286 
Virtual Laboratory in Electricity, 6. 6 
Visibility, 30 33, 31 33 
Vision problems, 241-247 
Visual considerations, 193, 216 
the 'fold," 199-201. 200 
graphic images. 207 

first impressions, 207 210. 208 211 
functional role, 211 215, 212 215 
left-justified text. 204-205. 205 
logo area. 201. 201 202 
text contrast, 203-204, 203-204 
typefaces for readability, 202-203, 203 
vertical list arrangement. 206, 296 207 


visual element anchoring, 194-199, 194- 
199 

The Visual Display of Quantitative 
Information (Tufte), 43 
Voice, 233 235 
Von Oech, Roger, 96 

W 

Waterfall model, 49. See also Repeating 
Waterfall model 
implementation stage, 60, 60 
integration and testing stage. 60 61, 61 
project planning stage, 55, 56 
requirements definition stage. 56 57, 57 
stages of. 49 50 

systems design stage. 57-59, 59 
vs. Agile method. 54 table 
Watermark. 203 
WAVE tool. 255 

Web Content Accessibility Guidelines, 255 
Web frameworks, 278-279 
Websites. 1. 22 

accessibility issues. 239 256 
application power. 7 
consistency in, 20 22 
costs of bad user interface design. 15-21 
and creativity, 93-112 
design solutions, 167-190 
design specification, 259 280 
flow diagram of. 67. 67 
for fueling commercial enterprise, 2 4 
graphic images. 207-215 
navigating, 139 164 
power to persuade, 2 
for simulation and training. 4-6 
software expectations, 8 9 
terminology of. 7-8 
text display, 202 207 
usability testing, 283 300 
user centered dosign. 9 15 
user interface design business, 303-319 
visual structure. 194 202 
writing for, 220 231, 222 223, 226. 229 
230 

WebSTAT report, 19, 19 
A Whack on the Side of the Head (Von 
Oech). 96 

Whisenand, Thomas. 39 
Wireframes. 12. 12. 261 

pencil-sketch, 262 263. 262 263 
software-based. 264. 265-270 
Wizard, 162. 162 
Word wrap. 127 
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Work finding. 310-311 
Workforce Investment Act of 1998. 250 
World Wide Web Consortium, 255 
Wren, Christopher, Sir, 139 
Writing. 219, 236 

for instruction, 231 235 
proposals, 311 315 

for the Web. 220 231. 222 223. 226. 229 
230 

WYSIWYG, 273 

X 

X height. 202 
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